jQuery Steps

In this section you will learn how to intialize jQuery Steps and what you need for that.

Let's get started!

To get started we just need two javascript references, one stylesheet reference, a bit HTML and one line javascript code.

    
<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <meta charset="utf-8">
        <script src="jquery.js"></script> 
        <script src="jquery.steps.js"></script>
        <link src="jquery.steps.css" rel="stylesheet">
    </head>
    <body>
        <script>
            $("#wizard").steps();
        </script>
        <div id="wizard"></div>
    </body>
</html>

How to add steps?

As you may noticed in the example above we have not added any steps yet. However to include steps to your wizard before initialization we have to insert a bit more HTML. See the following example.

<div id="wizard">
    <h1>First Step</h1>
    <div>First Content</div>
    <h1>Second Step</h1>
    <div>Second Content</div>
</div>

The important thing here to mention is that each step is represented by a title and a content element of your choice (more details on this later).

How to add steps dynamically?

In the last example we have added two steps by using the HTML way. This differs from the dynamic way, because the later requires that the wizard is already initialized. So in the next example we will just add some more javascript to the existing script block.

<script>
    var wizard = $("#wizard").steps();

    // Add one step after initialization
    wizard.steps("add", {
        title: "HTML code", 
        content: "<strong>HTML code</strong>"
    });
</script>

- css - transformation - id has to be unique

Info:

In this section you will learn about styling and the capabilities you have.

HTML & CSS Structure

Before initialization your HTML might look like the following.

<div id="wizard">
    <h1>First Step</h1>
    <div>First Content</div>
    <h1>Second Step</h1>
    <div>Second Content</div>
</div>

After initialization and this is more important your HTML will be transformed into a structure like that.

<div>#wizard.wizard.clearfix.vertical
 ├── <div>.steps.clearfix
 │    └── <ul>
 │         └── <li>.first.last.current.disabled.done.error
 │              └── <a>#wizard-t-{index}
 │                   ├── <span>.current-info.audible
 │                   ├── <span>.number
 │                   └── Text
 ├── <div>.contents.clearfix
 │    ├── <h1>#wizard-h-{index}.title.current
 │    └── <div>#wizard-p-{index}.body.current
 └── <div>.actions.clearfix
      └── <ul>
           └── <li>.disabled
                └── <a>

The following specific charactaristics must be considered:

.vertical will be added to the outer component wrapper if the stepsOrientation option is set to vertical or 1.
.first is added to the first step and .last to the last step.
.current will be added to the active step, title and panel.
.disabled will be added to disabled steps or buttons.
.done will be set on valid steps and .error on invalid steps.
{index} is a placeholder for the position (zero-based) of steps and their related contents (title and panel).
The div and h1 elements can be separatly configured on initialization (please see the next section).

CSS classes

A list of all CSS classes.

Class name	Description
`wizard` *	The main CSS class; it's set to the outer control wrapper.
`steps`	Wrapper class for the step navigation.
`content`	Wrapper class for the step panels.
`actions`	Wrapper class for the pager.
`clearfix` *	Helper class.
`vertical`	This class will be added to the outer control wrapper in order to support vertical steps.
`current`	Marks the active step (the current step, content title and content body).
`current-info`	Adds more information for screenreader to the current step.
`audible`	Labels content that is important for screenreader but not for normal browser.
`disabled`	Indicates that a button is disabled.
`first`	Marks the first step for better styling.
`last`	Marks the last step for better styling.
`error`	This class is added to the current step in case of step prevention.
`done`	This class is added to all the successful passed steps.
`number`	Emphasizes the order number of the steps.
`body`	Declares the content area of a step.
`title`	Declares the title area of a step.

* The CSS class name can be customized on initialization by using the options.

Here you learn about customization.

Appearance

Name	Type	Description
`headerTag`	String	The header tag is used to find the step button text within the declared wizard area. Default value: `h1`
`bodyTag`	String	The body tag is used to find the step content within the declared wizard area. Default value: `div`
`contentContainerTag`	String	The content container tag which will be used to wrap all step contents. Default value: `div`
`actionContainerTag`	String	The action container tag which will be used to wrap the pagination navigation. Default value: `div`
`stepsContainerTag`	String	The steps container tag which will be used to wrap the steps navigation. Default value: `div`
`cssClass`	String	The css class which will be added to the outer component wrapper. Default value: `wizard`
`clearFixCssClass`	String	The css class which will be used for floating scenarios. Default value: `clearfix`
`stepsOrientation`	String or Integer	Default value: `horizontal` or `0`

Templates

Name	Type	Description
`transitionEffect`	String or Integer	The animation effect which will be used for step transitions. Default value: `none` or `0`
`transitionEffectSpeed`	Integer	Animation speed for step transitions (in milliseconds). Default value: `200`

Behaviour

Name	Type	Description
`autoFocus`	String
`enableAllSteps`	String
`enableKeyNavigation`	String
`enablePagination`	String
	String
	String
	String
	String
	String
	String

Transition Effects

Name	Type	Description
	String

Events

Name	Type	Description
	String

Labels

Name	Type	Description
	String