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

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>
  <div class="step">
    <h2>Step 2</h2>
    <button data-action="prev">Back</button>
    <button data-action="next">Next</button>
  </div>
  <div class="step">
    <h2>Step 3</h2>
    <button data-action="prev">Back</button>
    <button data-action="cancel">Cancel</button>
  </div>
</div>

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

<script src="//code.jquery.com/jquery-1.12.0.min.js"></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
myWizard.init({/*options*/});

// next step
myWizard.next();

// previous step
myWizard.prev();

// goto specified step
myWizard.step(2);

// resets the wizard
myWizard.cancel();

// returns a jQuery object of the specified step
myWizard.getStep(2);

// 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
myWizard.disable(2);

// enables specified step
myWizard.enable(2);

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:

2016-02-18

• JS update

---

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