Markup
You need a form with the right markup as following.
Each fieldset will became a step.
The title of the fieldset will be the headers titles.
And the legend will be the header title description.
Inside the fieldset you put your stuffs.
<form>
<fieldset title="Step 1">
<legend>description one</legend>
<!-- inputs -->
</fieldset>
<fieldset title="Step 2">
<legend>description two</legend>
<!-- inputs -->
</fieldset>
<input type="submit" />
</form>
Default
Using the default options.
$('form').stepy();
Title Click
You can to use the header items to navigate between the steps with a click.
The header click is good when you have a lot of steps and want to jump a non sequential steps.
$('.form').stepy({ titleClick: true });
Back Label and Next Label
The back and next navigation buttons has a label that you can chage.
$('form').stepy({
backLabel: '<<',
nextLabel: '>>'
});
Description
Each step receives your description that is the legend element of the fieldset.
That element is used on header to describe the step, but you can disabled it.
Disable the description does not hide the original legend element. If you want to hide just the legend element, use CSS for it.
$('form').stepy({ description: false });
Enter
By default, when you press the key enter, the next step will be called giving you a better usability.
If the option validate is enabled, then the step will be validated before.
$('form').stepy({ enter: true });
Finish Button
Let the Stepy to move your submit button or your element with class stepy-finish to inside the last step as a finish button.
If you want let your button inside de form and visible during all steps, just turns this option off.
$('form').stepy({ finishButton: false });
Finish
Callback to be called when you press the finish button. Inside it you can prevent the submit returning false.
The element that will trigger can be a submit type element or any other button with the class stepy-finish.
$('form').stepy({
finish: function() {
alert('Canceling...');
return false;
}
});
Legend
Display the legend element on fieldset.
When this option is false, it's just hidden. The content of the legend element will be used to set the header description.
$('form').stepy({ legend: false });
Next
This callback is trigged before you go to the next step.
Like the other callback, if you return false it won't go to the next step.
Here you can do your own validation, manually or using your favorite plugin.
$('form').stepy({
next: function(index) {
alert('Going to step: ' + index);
}
});
Back
This callback is trigged before you go to the back step.
Like the other callback, if you return false it won't go to the back step.
$('form').stepy({
back: function(index) {
alert('Returning to step: ' + index);
}
});
Select
This callback is trigged when the current step is rendered.
Here you can do actions to manipulate the current step with the elements shown to the user.
$('form').stepy({
select: function(index) {
alert('Rendered step: ' + index);
}
});
Title Target
You can change the place where the header will be rendered passing the selector of the element where the header will be appended.
$('form').stepy({ titleClick: true });
Transition and Duration
You can set an effect during the transitions between the steps.
You can choose fade, slide or undefined for the normal transition.
$('form').stepy({
duration : 400,
transition: 'fade'
});
Options:
Callback before the backward action.
Change the back button label.
Block the next step if the current is invalid.
Choose if the descriptions of the titles will be showed.
Duration of the transition between steps in ms.
Enables the enter key to change to the next step.
If an error occurs, a image is showed in the title of the corresponding step.
Callback before the finish action.
Include the button with class called '.finish' into the last step.
Choose the fields to be ignored on validation.
Choose if the legends of the steps will be showed.
Callback before the forward action.
Change the next button label.
Callback executed when the step is shown.
Active the back and next action in the titles.
Choose the place where titles will be placed.
Use transition between steps ('hide', 'fade' or 'slide').
Active the jQuery Validation for each step.
Changing the settings globally:
You can change any option mentioning the scope $.fn.stepy.defaults. + option_name. It must be called before you bind the plugin.
$.fn.stepy.defaults.validate = true;
$.fn.stepy.defaults.titleClick = true;
Functions:
$('form').stepy('step');
Goes to the given step.
$('form').stepy('destroy');
Destroy the Stepy's bind and gives you the raw element before it.