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:

<form id="wizard1">
    <div class="wizard-header">
        <ul>
            <li role="presentation" class="wizard-step-indicator">Start</li>
            <li role="presentation" class="wizard-step-indicator">Profile</li>
            <li role="presentation" class="wizard-step-indicator">Message</li>
            <li role="presentation" class="wizard-step-indicator">Finish</li>
        </ul>
    </div>
    <div class="wizard-content">
        <div class="wizard-step">
          <h2>Welcome to my wizard</h2>
          <p>Let's begin</p>
          <button type="button" class="wizard-next">Start</button>
        </div>
        <div class="wizard-step">
            <div>
                <label for="name">Name</label>
                <input type="text" id="name" class="required" />
            </div>
            <button type="button" class="wizard-prev">Previous</button>
            <button type="button" class="wizard-next">Next</button>
        </div>
        <div class="wizard-step">
            <div>
                <label for="message">Message</label>
                <textarea id="message"></textarea>
            </div>
            <button type="button" class="wizard-prev">Previous</button>
            <button type="button" class="wizard-next">Next</button>
        </div>
        <div class="wizard-step">
            <button type="button" class="wizard-prev">Previous</button>
            <button type="button" class="wizard-finish">Finish</button>
            <button type="button" class="wizard-goto" value="0">Go back to start</button>
        </div>
    </div>
</form>

Include the plugin files after your jQuery reference, and run the following code:

$("#wizard1").simpleWizard();

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.

$("#wizard1").simpleWizard({
    cssClassStepDone: "wizard-done", // default value
    cssClassStepActive: "wizard-current", // default value
});

What about events?

You can add event handlers to the plugin initialisation code.

$("#wizard1").simpleWizard({
    onInit: function() {
        alert("Let's get started!")
    },
    onChange: function() {
        alert("More to come..");
    }
    onFinish: function() {
        alert("End of the line, pal.");
    }
});

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.