A Wizard Plugin
You need a form with the right markup as following.
Each .stepy-step
will became a step.
The title
of the .stepy-step
will be the headers titles.
And the .stepy-legend
will be the header title description.
Inside the .stepy-step
you put your stuffs.
<form>
<fieldset title="Step 1" class="stepy-step">
<legend class="stepy-legend">legend one</legend>
<!-- inputs -->
</fieldset>
<fieldset title="Step 2" class="stepy-step">
<legend class="stepy-legend">legend two</legend>
<!-- inputs -->
</fieldset>
<fieldset title="Step 3" class="stepy-step">
<legend class="stepy-legend">legend three</legend>
<!-- inputs -->
</fieldset>
<a class="stepy-back">back</a>
<a class="stepy-next">next</a>
<input type="submit" class="stepy-finish" />
</form>
Using the default options.
$('form').stepy();
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 });
Each step receives your description that is the .stepy-legend
element of the .stepy-step
.
That element is used on header to describe the step, but you can disabled it.
Disable the description does not hide the original .stepy-legend
element. If you want to hide just the .stepy-legend
element, use CSS for it.
$('form').stepy({ description: false });
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 });
The selector of you finish button.
$('form').stepy({ finishButton: false });
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;
}
});
Display the .stepy-legend
element on fieldset.
When this option is false
, it's just hidden. The content of the .stepy-legend
element will be used to set the header description.
$('form').stepy({ legend: false });
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, totalSteps) {
alert('Going to step: ' + index + ' with total of steps: ' + totalSteps);
}
});
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, totalSteps) {
alert('Returning to step: ' + index + ' with total of steps: ' + totalSteps);
}
});
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, totalSteps) {
alert('Rendered step: ' + index + ' with total of steps: ' + totalSteps);
}
});
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 });
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'
});
If you don't want a header, you can just change header
to false
and it won't be created.
$('form').stepy({ header: false });
The class to find the back button inside each step.
$('form').stepy({ backButton: '.stepy-back' });
The class to find the back button inside each step.
$('form').stepy({ nextButton: '.stepy-next' });
If you wish, you can use global buttons to control the steps, just put it where you want.
$('form').stepy({ nextButton: '.stepy-next' });
You can integrate any plugin of validation on your steps, just saying if each field is valid or not.
$('form').stepy({ nextButton: '.stepy-next' });
This options blocks the navigation to next step if the current is invalid.
$('form').stepy({ nextButton: '.stepy-next' });
Callback before the backward action.
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.
Creates a header with title and description.
Choose the fields to be ignored on validation.
Choose if the legends of the steps will be showed.
Callback before the forward action.
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').
Callback to each field of each step.
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;
$('form').stepy('step');
Goes to the given step.
$('form').stepy('destroy');
Destroy the Stepy's bind and gives you the raw element before it.