Step Wizard Plugin In jQuery – jquery-steps

-Customizable-Step-Wizard-Plugin-For-jQuery-steps
File Size:50.48 KB
Views Total:465
Last Update:February 13, 2018
Publish Date:February 13, 2018
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

Change Log

2017-09-13

  • v1.0.1