jQuery UI - Demos & Documentation

Interactions: Draggable; Droppable; Resizable; Selectable; Sortable
Widgets: Accordion; Datepicker; Dialog; Progressbar; Slider; Tabs
Effects: Add Class; Remove Class; Animate; Effect; Hide; Show; Switch Class; Toggle; Toggle Class
About jQuery UI: UI Developer Guidelines; Changelog; Roadmap; Subversion Access
Theming: Theming jQuery UI; jQuery UI CSS Framework; ThemeRoller application; Theme Switcher Widget

Functional demo:

Wizard

Download ui.Wizard.js

New window

step 1 - falls through to step 2 on next

step 2 - branch step

step 3 - submit step

step 4

step 5 - last step

Click HEADERS to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.

The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is usable without JavaScript.

Click HEADERS to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.

The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is usable without JavaScript.

Overview
Options
Events
Methods
Theming

Overview
Options
Events
Methods
Theming

Make the selected form into a multi-step wizard widget. Semantic requirements:

The markup of your wizard container form needs several content panels, marked with the class ="step"

<form id="wizard">
    <div class="step">First content</div>
    <div class="step">Second content</div>
    <button type="button" class="wizard_back">back</button>
    <button type="button" class="wizard_next">next</button>
</form>

If you use a different element for the header, specify the header-option with an appropriate selector, eg. header: 'h3'. The content element must be always next to its header.

If you have links inside the wizard content and use a-elements as headers, add a class to them and use that as the header, eg. header: 'a.header'.

Use activate(Number) to change the active content programmatically.

Dependencies

UI Core
jquery.form.js (Optional)
jquery.history.js (Optional)
jquery.validation.js (Optional)

A simple jQuery UI Accordion.

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

<!DOCTYPE html>
                <html>
                <head>
                  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
                  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
                  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
                  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.wizard.js"></script>
                  <script type="text/javascript">
                  $(document).ready(function(){
                    $("#wizard").wizard();
                  });
                  </script>
                </head>
                <body style="font-size:62.5%;">
                  
                <div id="wizard">
	                <h3><a href="#">Section 1</a></h3>
	                <div>
		                <p>
		                Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		                ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		                amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		                odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
		                </p>
	                </div>
	                <h3><a href="#">Section 2</a></h3>
	                <div>
		                <p>
		                Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		                purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		                velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		                suscipit faucibus urna.
		                </p>
	                </div>
	                <h3><a href="#">Section 3</a></h3>
	                <div>
		                <p>
		                Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
		                Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
		                ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
		                lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
		                </p>
		                <ul>
			                <li>List item one</li>
			                <li>List item two</li>
			                <li>List item three</li>
		                </ul>
	                </div>
	                <h3><a href="#">Section 4</a></h3>
	                <div>
		                <p>
		                Cras dictum. Pellentesque habitant morbi tristique senectus et netus
		                et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
		                faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
		                mauris vel est.
		                </p>
		                <p>
		                Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
		                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
		                inceptos himenaeos.
		                </p>
	                </div>
                </div>

                </body>
                </html>

autoNextDisabled

Type:

Boolean

Default:

false,

Forces the Next button for each step to be automatically disabled, until manually reenabled (see: "enableNext" method"). Useful when wizard requires more complex validation than provided by the validate plugin.
back

Type:

Selector

Default:

".wizard_back"

Selector which identifies button for returning to previous step.
formOptions

Type:

Object

Default:

undefined,

Options passed to jquery.form.js plugin. See the form plugin for details. Specifying this option automatically enables the form plugin for the wizard. If you need to temporarily disable the plugin (say, for debugging), set the formPluginEnabled option to false.
formPluginEnabled

Type:

Boolean

Default:

true, if formOptions loaded; false, otherwise

Enables form plugin. Normally set automatically based on presence of formOptions, so the is rarely cause to set it manually.
historyEnabled

Type:

Boolean

Default:

true, if history plugin loaded; false, otherwise

Enables the jquery.history.js plugin. If unspecified, it will be set based on the presence of the plugin, so it should only need to be set, if you need to override that behavior.
linkClass

Type:

Selector

Default:

".link"

Selector which identifies a element which indicates which step to go to next.
Code examples
Depending on the user choice, control will flow to either step3 or step 4
```
 
```
next

Type:

Selector

Default:

".wizard_next"

Selector which identifies button for continuing to the next step.
serverSideValidationUrls

Type:

array

Default:

undefined,

??????????
submitStepClass

Type:

Selector

Default:

".submit_step",

Selector which identifies elements which are submit steps. When a submit step is reached, it is treated as the last step in the wizard: The form data is sent to the server, and upon success, the wizard ends.
textBack

Type:

String

Default:

'Back',

Text used on [back] button on the all steps.
textNext

Type:

String

Default:

'Next'

Text used on [next] button on the steps before the last.
textSubmit

Type:

String

Default:

'Submit',

Text used on the [next] button for the final step of the Wizard.
validationEnabled

Type:

Boolean

Default:

true, if validationOptions loaded; false, otherwise

Enables validation. Normally set automatically based on presence of validationOptions, so the is rarely cause to set it manually.
validationOptions

Type:

Object

Default:

undefined

Options passed to jquery.validate.js plugin. See the validation plugin for details. Specifying this option automatically enables validation for the wizard. If you need to temporarily disable the plugin (say, for debugging), set the validationEnabled option to false.

afterback

Type:: wizardafterback


                
$('.ui-wizard').bind('wizardafterback', function(event, ui) {
				// no members in ui
                });

Code examples

Supply a callback function to handle the afterBack event as an init option.

$('.selector').wizard({
                   afterBack: function(event, ui) { ... }
                });

Bind to the change event by type: wizardafterback.

$('.selector').bind('wizardafterback', function(event, ui) {
                  ...
                });

afternext

Type:: wizardafternext


                
$('.ui-wizard').bind('wizardafternext', function(event, ui) {
				// no members in ui
                });

Code examples

Supply a callback function to handle the afterNext event as an init option.

$('.selector').wizard({
                   afterNext: function(event, ui) { ... }
                });

Bind to the change event by type: wizardafternext.

$('.selector').bind('wizardafternext', function(event, ui) {
                  ...
                });

show

Type:: wizardshow


                
$('.ui-wizard').bind('wizardshow', function(event, ui) {
 *                 ui.step // jQuery object,  the element being displayed.
 *                 ui.stepInx  // int,  0-based index of the DIV.
 *                 ui.backwards// boolean - true if reached by clicking "back", false otherwise.
                });

Code examples

Supply a callback function to handle the afterNext event as an init option.

$('.selector').wizard({
                   afterNext: function(event, ui) { ... }
                });

Bind to the change event by type: wizardafternext.

$('.selector').bind('wizardafternext', function(event, ui) {
                  ...
                });

destroy

Signature:

.wizard( 'destroy')

Remove the wizard functionality completely. This will return the element back to its pre-init state.
disable

Signature:

.wizard( 'disable')

Disable the wizard.
enable

Signature:

.wizard( 'enable')

Enable the wizard.
option

Signature:

.wizard( 'option', optionName , [value])

Get or set any wizard option. If no value is specified, will act as a getter.
activate

Signature:

.wizard( 'activate', index)

An alias for gotoStep method.
gotoStep

Signature:

.wizard( 'gotoStep', index)

Moves flow of wizard to a panel of the Wizard programmatically. The index can be a zero-indexed number to match the position of the div to open or a Selector matching an element.
enableNext

Signature:

.wizard( 'enableNext')

Enables the 'Next' button.
disableNext

Signature:

.wizard( 'disableNext')

Disables the 'Next' button.
enableBack

Signature:

.wizard( 'enableBack')

Enables the 'Back' button.
disableBack

Signature:

.wizard( 'disableBack')

Disables the 'Back' button.

Wizard Theming to come.......

The jQuery UI Accordion plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.wizard.css stylesheet that can be modified. These classes are highlighed in bold below.

Sample markup with jQuery UI CSS Framework classes

<div class="ui-wizard ui-widget ui-helper-reset">
  <h3 class="ui-wizard-header ui-helper-reset ui-state-active ui-corner-top">
    <span class="ui-icon ui-icon-triangle-1-s"/>
    <a href="#">Section 1</a>
  </h3>
  <div class="ui-wizard-content ui-helper-reset ui-widget-content ui-corner-bottom ui-wizard-content-active">
    Section 1 content
  </div>
  <h3 class="ui-wizard-header ui-helper-reset ui-state-default ui-corner-all">
    <span class="ui-icon ui-icon-triangle-1-e"/>
    <a href="#">Section 2</a>
  </h3>
  <div class="ui-wizard-content ui-helper-reset ui-widget-content ui-corner-bottom">
    Section 2 content
  </div>
  <h3 class="ui-wizard-header ui-helper-reset ui-state-default ui-corner-all">
    <span class="ui-icon ui-icon-triangle-1-e"/>
    <a href="#">Section 3</a>
  </h3>
  <div class="ui-wizard-content ui-helper-reset ui-widget-content ui-corner-bottom">
    Section 3 content
  </div>
</div>

Note: This is a sample of markup generated by the wizard plugin, not markup you should use to create a wizard. The only markup needed for that is
<div>
   <h3><a href="#">Section 1</a></h3>
   <div>
      Section 1 content
   </div>
   <h3><a href="#">Section 2</a></h3>
   <div>
      Section 2 content
   </div>
   <h3><a href="#">Section 3</a></h3>
   <div>
      Section 3 content
   </div>
</div>.

Functional demo:

Wizard

step 1 - falls through to step 2 on next

step 2 - branch step

step 3 - submit step

step 4

step 5 - last step

Examples

Overview

Dependencies

Example

Options

Code examples

Events

Code examples

Code examples

Code examples

Methods

Theming

Sample markup with jQuery UI CSS Framework classes