Wizard

Description

Provides a step-by-step work flow to the user. Need to include the wizard javascript in your page.

<script type="text/javascript"
    src="//www.ucsd.edu/common/cwp/active-cherry/lib/jquery.wizard-1.0/jquery.wizard-min.js"></script>

Sample

Include the following java scripts on your page.

<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        // wizard
        $(".wizard").wizard();
     });
})(jQuery);
</script>

In this case, we've specified any element with class wizard will be transformed into a wizard. The div tag inside each li tag will be the text that is displayed. If the text has a <a href=""></a>, then the step can be returned to. The current step is noted by a li with the current class.

<ol class="wizard">
    <li>
        <div>Step 1, cannot go back to this step.</div>
    </li>
    <li>
        <div><a href="#">Step 2, user can go back to this step.</a></div>
    </li>
    <li class="current">
        <div>Step 3, this is the current step.</div>
    </li>
    <li>
        <div>Step 4, this is a future step.</div>
    </li>
</ol>