github Follow star Star! download Download

Intro

Lightweight jQuery step wizard plugin.

Tested in IE11+, Edge, Chrome, Firefox, Opera, Safari.

...
...
...

Installation

Bower

bower install jquery-steps

Github

git clone http://github.com/oguzhanoya/jquery-steps.git

Manually

download Download .zip package

Setup

Include plugin stylesheets.
<link rel="stylesheet" href="css/jquery-steps.css">

Make necessary markup for wizard. That's all, you don't need to do anything else.

<div id="demo">
    <div class="step-app">
        <ul class="step-steps">
            <li><a href="#step1">Step 1</a></li>
            <li><a href="#step2">Step 2</a></li>
            <li><a href="#step3">Step 3</a></li>
        </ul>
        <div class="step-content">
            <div class="step-tab-panel" id="step1">
                ...
            </div>
            <div class="step-tab-panel" id="step2">
                ...
            </div>
            <div class="step-tab-panel" id="step3">
                ...
            </div>
        </div>
        <div class="step-footer">
            <button data-direction="prev">Previous</button>
            <button data-direction="next">Next</button>
            <button data-direction="finish">Finish</button>
        </div>
    </div>
</div>

Include plugin and dependeces. jQuery is the only dependency, make sure to include it.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery-steps.js"></script>

Init plugin with choosen options.

<script>
    $('#demo').steps({
        onFinish: function () { alert('Wizard Completed'); }
    });
</script>

Options

startAt

@default:
0

@type:
Number

Start wizard at specifed step number.


showBackButton

@default:
true

@type:
Boolean

Indicates whether the back button will be visible.


showFooterButtons

@default:
true

@type:
Boolean

Indicates whether the footer buttons will be visible.

Events

onInit

@type:
Function

Fired when plugin is initialized


onChange

@param:
Number
currentIndex

@param:
Number
newIndex

@param:
String
stepDirection

@type:
Function

Fired when plugin step changed


onFinish

@type:
Function

Fired when plugin wizard finished


onDestroy

@type:
Function

Fired when plugin destroy

API

.getStepIndex()

@return:
Number

Returning current step number.


.destroy()

Destroy wizard. Clear objects and bindings.

License

The MIT License