Home

jWizard is a user-friendly, flexible and slim wizard plugin for the jQuery Javascript Framework. Based off of the Windows wizards, as well as the .NET Wizard Control, it is meant to enrich your user interface with a wizard that helps guide your users through a series of steps, reducing a large and complicated process into small chunks to keep your users from being overwhelmed.

Features

• Minimal HTML, CSS and JS startup requirements
• Vastly flexible and customizable
• Custom Events for end-users to hook into within their applications
• Stylable (via jQuery UI's ThemeRoller? or custom CSS Classes)
• Sidebar Navigation / Step Counter
• Seamless HTML Forms integration
• Setup and configuration is simple, intuitive, and painless.

With nothing more than:

<div id="jWizard">
   <div id="step1" title="Test Step #1"></div>
   <div id="step2" title="Test Step #2"></div>
   <div id="step3" title="Test Step #3"></div>
   <div id="step4" title="Test Step #4"></div>
   <div id="finalStep" title="Test Final Step"></div>
</div>

and

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.jWizard-min.js"></script>

and

$(document).ready(function() {
   $('#jWizard').jWizard();
});

a wizard (complete with navigation buttons) will be generated.

Important installation notice about jQuery UI

Remember to include jQuery UI Widget and not just core, since this a jQuery UI widget plugin and not a pure jQuery plugin