jWizard

jWizard is a jQuery UI widget for creating wizard interfaces based on your HTML Forms.

Dependencies

• jQuery (1.7+)
• jQuery UI (1.8.7+)
  • Widget Factory
  • Button
  • Progressbar (optional)
  • Menu (optional)

Usage

Include the JS and CSS located in the dist folder (minified versions are included there as well)

<script src="jquery.jWizard.js"></script> <link href="jquery.jWizard.css" rel="stylesheet">

A wizard can be comprised of a <form>, but any other (block-level) element, like <div> will also work.

<form id="wizard">     <!-- steps will go here --> </form>  <!-- or -->  <div id="wizard">     <!-- steps will go here --> </div>

A step can also be made up of just about any (block-level) element as well.

• If using a <fieldset>, the <legend> element will contain the step's title.
• If using any other element, add a title or data-jwizard-title attribute to specify a title

<fieldset>     <!-- step title -->     <legend>Step 1</legend>          <!-- step content --> </fieldset>  <!-- or -->  <div title="Step 1">     <!-- step content --> </div>  <!-- or -->  <div data-jwizard-title="Step 1">     <!-- step content --> </div>

Lastly, initialize the wizard via JS:

$("#wizard").jWizard();

You can see the available options and events at the documentation page