jQuery Stepy - A Wizard Plugin (current version: 1.1.0)
buy me a coffee
jQuery Stepy is a plugin based on FormToWizard that generates a customizable wizard.
With default options using checkbox:
description one User: E-mail: Password:
description two Nick Name: Bio:
$('#step').stepy();
A custom form in a validation style:
description one User: E-mail: Checked? Newsletter? Yep Nop Password:
description two Nick Name: Bio:
description three Birthday:
Site:
$('#step').stepy({
backLabel: 'Backward',
block: true,
errorImage: true,
nextLabel: 'Forward',
titleClick: true,
validate: true
});
- When the attribute 'validate' is true, you must include the jquery.validate.js.
With just step without form:
description one
description two
description three
$('div#step').stepy({
finishButton: false
});
With transitions callback:
description one Name: E-mail:
description two User: Password:
description three Nick Name: Age:
description four Bio: Detail:
$('#step').stepy({
back: function(index) {
alert('Going to step ' + index + '...');
}, next: function(index) {
if (!isValid()) {
alert('Invalid random value!');
return false;
}
alert('Going to step ' + index + '...');
}, select: function(index) {
alert('Current step ' + index + '.');
}, finish: function(index) {
alert('Finishing on step ' + index + '...');
},
titleClick: true
});
- You can do validations during the callback;
- Return "false" to prevent the transition;
- Return "true" or nothing to continue the transition;
- If the Stepy is a form and the finish element is not a submit type, then .submit() will be invoked.
With target for the titles and custom legend and description:
--
--
--
<div id="title-target"></div>
$('#step').stepy({
description: false,
legend: false,
titleClick: true,
titleTarget: '#title-target'
});
- You can choose any specific target;
- Even if the fieldset has legend, it will not appear if legend attribute is false;
- The description depends of the legend element. Even with legend attribute setted to false;
- The finish button can be any element you want, since it has the class name 'finish'.
HTML structure:
<form id="step">
<fieldset title="Title">
<legend>description</legend>
<!-- input fields -->
</fieldset>
<fieldset title="Title">
<legend>description</legend>
<!-- input fields -->
</fieldset>
<input type="submit" class="finish"/>
</form>
- The fieldset's title is the main title of the step and the legend is the description of it.
Default options:
back: undefined
Callback before the backward action.
backLabel: '< Back'
Change the back button label.
block: false
* Block the next step if the current is invalid.
description: false
Choose if the descriptions of the titles will be showed.
errorImage: false
* If an error occurs, a image is showed in the title of the corresponding step.
finish: undefined
Callback before the finish action.
finishButton: true
Include the element with class name '.finish' into the last step.
ignore: ''
Choose the fields to be ignored on validation.
legend: false
Choose if the legends of the steps will be showed.
nextLabel: 'Next >'
Change the next button label.
next: undefined
Callback before the forward action.
titleClick: true
Active the back and next action in the titles.
titleTarget: ''
Choose the place where titles will be placed.
select: undefined
Callback executed when the step is shown.
validate: false
* Active the jQuery Validation for each step.
* Depends of jquery.validation.js.
Public functions:
$('#step').stepy('step', 2);
Change the form to step 2.