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.stepsGithub
git clone http://github.com/oguzhanoya/jquery-steps.gitCDN
<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