Simple jQuery & Bootstrap Based Wizard Interface - Wizard.js

Wizard.js is a jQuery content stepper plugin which makes use of Bootstrap's modal component to display any type of content in a step-by-step wizard interface. The plugin also allows to fire some events if action buttons are clicked. Form validation is supported as well (Requires jQuery validate plugin).

How to use it:

1. Make sure you first have jQuery library and Bootstrap framework are installed properly in the webpage.

<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Create custom steps for the wizard.

<div class="wizard" id="wizard">

  <div class="wizard-step" data-title="Step One">
      This is step one
  </div>

  <div class="wizard-step" data-title="Step Two">
      This is step two
  </div>

  <div class="wizard-step" data-title="Step Three">
      This is step three
  </div>

</div>

3. Initialize the wizard.

$('#wizard').wizard();

4. Open the wizard.

$('#wizard').wizard('open');

5. Full customization options and callback functions.

// wizard title
title: '',

// validation rules
validators: null,

// callbacks
onSubmit: null,
onReset: null,
onCancel: null,
onClose: null,
onOpen: null,

// custom text
previousText: '<< Back',
nextText: 'Next >>',
submitText: 'Submit',
cancelText: 'Cancel',

// shows cancel/prev buttons
showCancel: true,
showPrevious: true,

// shows progress bar
showProgress: false,

// is modal mode
isModal: true,

// auto open on page load
autoOpen: false

Change log:

2017-01-03

• add submit, cancelText

2016-10-21

• CSS update

---

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