Minimal Step By Step Progress Plugin With jQuery - Wizard.js

Minimal Step By Step Progress Plugin With jQuery - Wizard.js
File Size: 5.24 KB
Views Total: 1384
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Wizard.js is a tiny and simple-to-use jQuery plugin that converts a series of html elements into sequential steps like a wizard.

How to use it:

1. Build the html for the step by step wizard ui.

<div class="wizard" id="myWizard">
  <div class="step">
    <h2>Step 1</h2>
    <button data-action="next">Next</button>
  <div class="step">
    <h2>Step 2</h2>
    <button data-action="prev">Back</button>
    <button data-action="next">Next</button>
  <div class="step">
    <h2>Step 3</h2>
    <button data-action="prev">Back</button>
    <button data-action="cancel">Cancel</button>

2. Include the jQuery wizard.js plugin after jQuery library before you close the body tag.

<script src="//"></script>
<script src="wizard.js"></script>

3. Create a new wizard instance.

var myWizard = new Wizard($('#myWizard'));

4. Possible plugin options.

options = {

  // if the wizard should reset to the init state, or to an html string
  reset: false,   

  // the step to start at, 0 is default
  startAt: 0 

5. API methods.

// initialize the wizard

// next step;

// previous step

// goto specified step

// resets the wizard

// returns a jQuery object of the specified step

// returns an integer value between 0 and 100 inclusive of based on the step the user is currently on and total number of steps.
var precentComplete = mywizard.precentComplete();

// disables specified step

// enables specified step

6. Events.

// called after every .cancel call
myWizard.onCancel = function(){}

// called after every .enable
myWizard.onEnable = function(){}

// called after every .disable
myWizard.onDisable = function(){}

// called after every .next call
myWizard.onNext = function(){}

// called after every .prev call
myWizard.onPrev = function(){}

// called after every .next, .prev, and .step call
myWizard.onChange = function(){}

// called after every .init call
myWizard.onInit = function(){}

// called after every .end call
myWizard.onEnd = function(){}

// called after .prev is the wizard is at the start of all the steps
myWizard.onBeforeStart  = function(){}

Change log:


This awesome jQuery plugin is developed by RoseTheMarmot. For more Advanced Usages, please check the demo page or visit the official website.