Intro

Lightweight jQuery step wizard plugin.

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

Step 1
Step 2
Step 3

...

Installation

NPM

npm install jquery.steps

Github

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

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.steps@1.1.1/dist/jquery-steps.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery.steps@1.1.1/dist/jquery-steps.min.js"></script>

Manually

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 class="step-app" id="demo">
  <ul class="step-steps">
    <li data-step-target="step1">Step 1</li>
    <li data-step-target="step2">Step 2</li>
    <li data-step-target="step3">Step 3</li>
  </ul>
  <div class="step-content">
    <div class="step-tab-panel" data-step="step1">
      ...
    </div>
    <div class="step-tab-panel" data-step="step2">
      ...
    </div>
    <div class="step-tab-panel" data-step="step3">
      ...
    </div>
  </div>
  <div class="step-footer">
    <button data-step-action="prev" class="step-btn">Previous</button>
    <button data-step-action="next" class="step-btn">Next</button>
    <button data-step-action="finish" class="step-btn">Finish</button>
  </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('complete'); }
  });
</script>

Options

startAt

@default:

@type:

Number

Starts 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.

stepSelector

@default:

'.step-steps'

@type:

String

The selector used for each step.

contentSelector

@default:

'.step-content'

@type:

String

The selector used for the step content.

footerSelector

@default:

'.step-footer'

@type:

String

The selector used for the buttons.

activeClass

@default:

'active'

@type:

String

The class used when a step is active.

doneClass

@default:

'done'

@type:

String

The class used when a step is done.

errorClass

@default:

'error'

@type:

String

The class used when an error occurs in a step.

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.

.getMaxStepIndex()

@return:

Number

Gets the max step index.

.setStepIndex()

Sets the step index.

.next()

Goes to the next step.

.prev()

Goes to the previous step.

.finish()

Trigger the onFinish event.

.destroy()

Destroy wizard. Clear objects and bindings.

License

The MIT License