jQuery Steps - A powerful wizard plugin

Jul 27, 2014 in Layout 12715 views

Download

Overview
Documents

User Rating: 3.5/5 ( 4 votes)

Your Rating:

jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view. Furthermore, it is as simple as 1-2-3 to add plugins such as jQuery Validation which can prevent step changing or submission.

Features

Accessability support: Make it visible for everyone without extra work - just use it.
Async content loading: Load your content asynchronously via AJAX by calling e.g. aREST service.
Cool transition effects: Beautiful & sleek transition effects complete the offer.
Dynamic Manipulation: Add or remove steps dynamically via API.
Easy Navigation: Navigate in various different way using the keyboard, steps or pager - it is up to you.
State Persistence: Enable the saveState option - this will save your current step position of each individual wizard *.

Form validation made easy: Embed a validation plugin of your choice and customize it like you want - it is just that simple.
Embedded iframe content: Embed your content via an iframe - it feels like it would be a part of your site.
Keyboard navigation: Use your keyboard to navigate through your content.
Multiple wizards: Have multiple wizards on one page or even have nested wizards like you want.
Vertical Navigation: Switch to vertical navigation if you need.
And much more ...: Take a look to the examples and learn more about it.

Source: jquery-steps.com

1. INCLUDE JS FILES

<script src="jquery.js"></script> 
<script src="jquery.steps.js"></script>

2. HTML

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

3. JAVASCRIPT

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

4. SETTINGS

Appearance

Setting Name	Description	Type	Default Value
headerTag	The header tag is used to find the step button text within the declared wizard area.	String	h1
bodyTag	The body tag is used to find the step content within the declared wizard area.	String	div
contentContainerTag	The content container tag which will be used to wrap all step contents.	String	div
actionContainerTag	The action container tag which will be used to wrap the pagination navigation.	String	div
stepsContainerTag	The steps container tag which will be used to wrap the steps navigation.	String	div
cssClass	The css class which will be added to the outer component wrapper.	String	wizard
stepsOrientation	Determines whether the steps are vertically or horizontally oriented.	String or Integer	horizontalor 0

Templates

Setting Name	Description	Type	Default Value
titleTemplate	The title template which will be used to create a step button.	String	<span class="number">#index#.</span> #title#
loadingTemplate	The loading template which will be used to create the loading animation.	String	<span class="spinner"></span> #text#

Behaviour

Setting Name	Description	Type	Default Value
autoFocus	Sets the focus to the first wizard instance in order to enable the key navigation from the begining iftrue.	Boolean	false
enableAllSteps	Enables all steps from the begining if true (all steps are clickable).	Boolean	false
enableKeyNavigation	Enables keyboard navigation iftrue (arrow left and arrow right).	Boolean	true
enablePagination	Enables pagination (next, previous and finish button) if true.	Boolean	true
suppressPaginationOnFocus	Suppresses pagination if a form field is focused.	Boolean	true
enableContentCache	Enables cache for async loaded or iframe embedded content.	Boolean	true
enableCancelButton	Shows the cancel button if enabled.	Boolean	false
enableFinishButton	Shows the finish button if enabled.	Boolean	true
showFinishButtonAlways	Shows the finish button always (on each step; right beside the next button) if true. Otherwise the next button will be replaced by the finish button if the last step becomes active.	Boolean	false
forceMoveForward	Prevents jumping to a previous step.	Boolean	false
saveState	Saves the current state (step position) to a cookie. By coming next time the last active step becomes activated.	Boolean	false
startIndex	The position to start on (zero-based).	Integer	0

Transition Effects

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

Events

Setting Name	Description	Type	Default Value
onStepChanging	Fires before the step changes and can be used to prevent step changing by returningfalse. Very useful for form validation.	Event	function (event, currentIndex, newIndex) { return true; }
onStepChanged	Fires after the step has change.	Event	function (event, currentIndex, priorIndex) { }
onCanceled	Fires after cancelation.	Event	function (event) { }
onFinishing	Fires before finishing and can be used to prevent completion by returning false. Very useful for form validation.	Event	function (event, currentIndex) { return true; }
onFinished	Fires after completion.	Event	function (event, currentIndex) { }

Labels

Setting Name	Description	Type	Default Value
cancel	Label for the cancel button.	String	Cancel
current	This label is important for accessability reasons. Indicates which step is activated.	String	current step:
pagination	This label is important for accessability reasons and describes the kind of navigation.	String	Pagination
finish	Label for the finish button.	String	Finish
next	Label for the next button.	String	Next
previous	Label for the previous button.	String	Previous
loading	Label for the loading animation.	String	Loading ...

Example

var settings = {
    /* Appearance */
    headerTag: "h1",
    bodyTag: "div",
    contentContainerTag: "div",
    actionContainerTag: "div",
    stepsContainerTag: "div",
    cssClass: "wizard",
    stepsOrientation: $.fn.steps.stepsOrientation.horizontal,

    /* Templates */
    titleTemplate: '<span class="number">#index#.</span> #title#',
    loadingTemplate: '<span class="spinner"></span> #text#',

    /* Behaviour */
    autoFocus: false,
    enableAllSteps: false,
    enableKeyNavigation: true,
    enablePagination: true,
    suppressPaginationOnFocus: true,
    enableContentCache: true,
    enableCancelButton: true,
    enableFinishButton: true,
    preloadContent: false,
    showFinishButtonAlways: false,
    forceMoveForward: false,
    saveState: false,
    startIndex: 0,

    /* Transition Effects */
    transitionEffect: $.fn.steps.transitionEffect.none,
    transitionEffectSpeed: 200,

    /* Events */
    onStepChanging: function (event, currentIndex, newIndex) { return true; },
    onStepChanged: function (event, currentIndex, priorIndex) { }}, 
    onCanceled: function (event) { },
    onFinishing: function (event, currentIndex) { return true; }, 
    onFinished: function (event, currentIndex) { },

    /* Labels */
    labels: {
        cancel: "Cancel",
        current: "current step:",
        pagination: "Pagination",
        finish: "Finish",
        next: "Next",
        previous: "Previous",
        loading: "Loading ..."
    }
};

5. STEP OBJECT

Represents an step object.

Property Name	Description	Type	Default Value
title	The step title (HTML).	String	""
content	The step content (HTML).	String	""
contentMode	Indicates how the content will be loaded.	String or Integer	html or 0
contentUrl	The URI that refers to the content.	String	""

JavaScript Example

$("#wizard").steps("add", {
    title: "Step Title",
    contentMode: "async",
    contentUrl: "data.xml"
});

HTML Example

<div id="wizard">
    <h1>Step Title</h1>
    <div data-mode="async" data-url="data.xml">
    </div>
</div>

6. METHODS

Method Name	Description	Parameters	Return Type
add	Adds a new step. (chainable)	Object step	Object wizard
insert	Inserts a new step to a specific position. (chainable)	Integer index,Object step	Object wizard
remove	Removes a specific step by an given index.	Integer index	Boolean
getCurrentStep	Gets the current step object.	-	Object step
getCurrentIndex	Gets the current step index.	-	Integer
getStep	Gets a specific step object by index.	Integer index	Object step
next	Routes to the previous step.	-	Boolean
previous	Routes to the next step.	-	Boolean
finish	Triggers the onFinishing and onFinished event.	-	void
destroy	Removes the control functionality completely and transforms the current state to the initial HTML structure.	-	void
skip	Skips a certain amount of steps. Not yet implemented!	Integer count	Boolean

Example

$("#wizard").steps("insert", 0, {
   title: "Step Title",
   content: "<p>Step Body</p>"
});

JS Tutorial

jQuery Steps - A powerful wizard plugin

Features

Related Articles