Lightweight Step Wizard Plugin In jQuery – jquery-steps.js

Step Wizard
Demo    Download
Step-Wizard-Plugin-In-jQuery-jquery-steps
File Size: 12.12 KB
Views Total: 978 views
Last Update:March 31, 2020
Publish Date: December 18, 2019
Official Website: Go to website
License: MIT

The jQuery-steps is a lightweight and customizable jQuery plugin. steps form work with step-by-step wizard with navigation buttons and callback functions. It is easy to integrate other plugins e.g. jQuery validation plugin to create a step wizard driven form with field validation.

How to use :

1. Add HTML Code :

<link rel="stylesheet" href="jquery-steps.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-steps.js"></script>

2. Add basic html structure :

<div id="demo">
  <div class="step-app">
    <ul class="step-steps">
      <li><a href="#step1">Step 1</a></li>
      <li><a href="#step2">Step 2</a></li>
      <li><a href="#step3">Step 3</a></li>
    </ul>
    <div class="step-content">
      <div class="step-tab-panel" id="step1">
        ...
      </div>
      <div class="step-tab-panel" id="step2">
        ...
      </div>
      <div class="step-tab-panel" id="step3">
        ...
      </div>
    </div>
    <div class="step-footer">
      <button data-direction="prev" class="step-btn">Previous</button>
      <button data-direction="next" class="step-btn">Next</button>
      <button data-direction="finish" class="step-btn">Finish</button>
    </div>
  </div>
</div>

3.  Just  call the jquery plugin script :

$('#demo').steps();

Done


Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.