A simple, lightweight jQuery step wizard plugin.

Features

• Easy configuration
• Lightweight (2KB gzipped)
• Works in all major browsers including IE11+

Compatibility

IE11+, Edge, Chrome, Firefox, Opera, Safari

Installation

NPM

npm install jquery.steps

Github

git clone http://github.com/oguzhanoya/jquery-steps.git

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-steps.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-steps.min.js"></script>

Setup

Include plugin stylesheets.

<link rel="stylesheet" href="css/jquery-steps.css">

Make necessary markup for wizard. That's all, you don't need to do anything else.

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

Include plugin and dependeces. jQuery is the only dependency, make sure to include it.

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="js/jquery-steps.js"></script>

Init plugin with choosen options.

<script>
  $('#demo').steps({
    onFinish: function () { alert('complete'); }
  });
</script>

Configuration

|Setting|Default Value|Description| |---|---|---| |startAt|0|Starts wizard at specifed step number.| |showBackButton|true|Indicates whether the back button will be visible.| |showFooterButtons|true|Indicates whether the footer buttons will be visible.| |stepSelector|.step-steps|The selector used for each step.| |contentSelector|.step-content|The selector used for the step content.| |footerSelector|.step-footer|The selector used for the buttons.| |activeClass|active|The class used when a step is active.| |doneClass|done|The class used when a step is done.| |errorClass|error|The class used when an error occurs in a step.| |onInit|function(){}|Fired when plugin is initialized.| |onChange|function(currentIndex, newIndex, stepDirection){return true;}|Fired when plugin step changed.| |onFinish|function(){}|Fired when plugin wizard finished.| |onDestroy|function(){}|Fired when plugin destroy.|

Methods

|Name|Description| |---|---| |destory|Destroy the plugin instance.| |next|Goes to the next step.| |prev|Goes to the previous step.| |finish|Trigger the onFinish event.| |getStepIndex|Gets the current step index.(start from 0)| |getMaxStepIndex|Gets the max step index.| |setStepIndex|Sets the step index.|

License

MIT