pier5-stepped-process
v1.0.0
Published
Stepped Process is the simplest jQuery plugin for the creation of step by step forms or wizards.
Downloads
1
Maintainers
pier5Readme
Stepped Process jQuery Plugin
Stepped Process is the simplest jQuery plugin for the creation of step by step forms or wizards.
Getting Started
Simply call the steppedProcess method on the element you want to divide into steps:
$(document).ready(function() {
$(".steps-wrapper").steppedProcess();
});Your html should include an element which contains all the steps and an element which contains the controls (previous, next and finish buttons):
<body>
<div class="steps-wrapper">
<div class="step step-1">
<p>First step</p>
</div>
<div class="step step-2">
<p>Second step</p>
</div>
<div class="step step-3">
<p>Third step</p>
</div>
<div class="step step-4">
<p>Fourth step</p>
</div>
</div>
<div class="controls">
<button class="prev">Previous</button>
<button class="next">Next</button>
<button class="finish">Finish</button>
</div>
</body>By default, all elements with class step will be selected and turned into a single step each. The same applies for the buttons which by default are selected between the descendants of the element with class controls, using the prev next and finish class.
This and many other settings can be modified by passing parameters to the steppedProcess method:
$(document).ready(function() {
$(".steps-wrapper").steppedProcess({
startAt : 2,
stepSelector : '.page'
});
});A list of all the options is available at the end of the page here.
License
Copyright (c) 2016 Pierluigi Videsott Licensed under the MIT license.