jQuery Simple Wizard
A jQuery plugin for creating a simple wizard.
Why was this created?
I needed a simple jQuery wizard that simply navigates from one step to another, and the ones I've found were too complex. I didn't need the plugin to generate stuff like headings, previous and next buttons, etc. I wanted to have control over what goes on. So I created my own.
How do I use it?
Firstly, build your wizard markup using the following convention:
Start Profile Message Finish Welcome to my wizard Let's begin Start Name Previous Next Message Previous Next Previous Finish Go back to start
Include the plugin files after your jQuery reference, and run the following code:
;
where #wizard1
is a reference to the wizard container.
Note
As far as the HTML markup is concerned, as long as you use the wizard-step
class to mark the steps and wizard-step-indicator
to mark the step indicators, as well as the wizard-next
,wizard-prev
and wizard-finish
buttons, everything else is up to you.
What can I change?
Currently, there are only two items that you can control - the active state CSS class, and the done state CSS class. I'll update this as I make them available. Include them in the plugin initialisation code.
;
What about events?
You can add event handlers to the plugin initialisation code.
;
onInit
Called when the plugin is done initialising.
onChange
Called on every step change.
onFinish
Called when the wizard reaches the end.
What about transition animations?
The plugin will update the CSS class for the step element based on its state, and you can use CSS3 transition for animations. I don't see why we need to use JavaScript animations because I think we should all be using CSS3-capable browsers now.
What about validation?
This plugin supports jQuery Validation as well as jQuery Unobtrusive Validation. Simply include the libraries in your code prior to the plugin initialisation code for this to apply. Validation will be executed on every step change, and the plugin will prevent the user from moving forward when there's a validation error.