jQuery Smart Wizard

The awesome jQuery step wizard plugin


jQuery Smart Wizard is a step wizard plugin for jQuery. Provides a neat and stylish interface for your forms, checkout screen, registration steps, etc. Easy implementation, Bootstrap compatiblity, customizable toolbars, themes, events and Ajax support are few of the features.

Build Status npm version Latest Stable Version GitHub license Donate on Paypal

Demo

Live Example

Step 1 Content

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Step 2 Content

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Step 4 Content

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
More Examples

Installation

NPM
npm install smartwizard
Yarn
yarn add smartwizard
Composer
composer require techlab/smartwizard
CDN - jsDelivr
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/smartwizard@5.0.0/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/smartwizard@5.0.0/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
CDN - UNPKG
<!-- CSS -->
<link href="https://unpkg.com/smartwizard@5.0.0/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />

<!-- JavaScript -->
<script src="https://unpkg.com/smartwizard@5.0.0/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>

Downloads

Download jQuery Smart Wizard

Features

  • Standalone CSS
  • Bootstrap compatible
  • Various themes included
  • Customizable CSS
  • URL navigation and selection
  • Event support
  • Ajax content loading support
  • Keyboard navigation
  • Auto content height adjustment
  • Cool transition animations (fade/slide-horizontal/slide-vertical/slide-swing)
  • External anchor support
  • Easy to implement and minimal HTML required
  • Customizable toolbar, option to add extra buttons
  • Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 2+, jQuery 3.5+)
  • Supports all modern browsers
  • Responsive design
  • In-built reset method
  • Easy navigation with step anchors and navigation buttons

Documentation

Requirements
  1. jQuery (supports jQuery 1.11.1+, jQuery 2+, jQuery 3.5+)
Include jQuery SmartWizard CSS
<link href="../dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css">
The HTML Markup
<div id="smartwizard">
    <ul class="nav">
       <li>
           <a class="nav-link" href="#step-1">
              Step 1
           </a>
       </li>
       <li>
           <a class="nav-link" href="#step-2">
              Step 2
           </a>
       </li>
       <li>
           <a class="nav-link" href="#step-3">
              Step 3
           </a>
       </li>
       <li>
           <a class="nav-link" href="#step-4">
              Step 4
           </a>
       </li>
    </ul>

    <div class="tab-content">
       <div id="step-1" class="tab-pane" role="tabpanel">
          Step content
       </div>
       <div id="step-2" class="tab-pane" role="tabpanel">
          Step content
       </div>
       <div id="step-3" class="tab-pane" role="tabpanel">
          Step content
       </div>
       <div id="step-4" class="tab-pane" role="tabpanel">
          Step content
       </div>
    </div>
</div>
Include jQuery (ignore this if you have already included on the page)
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Include jQuery SmartWizard JavaScript
<script type="text/javascript" src="../dist/js/jquery.smartWizard.min.js"></script>
Initialize the jQuery SmartWizard
$(document).ready(function(){

  // SmartWizard initialize
  $('#smartwizard').smartWizard();

});
That is it!

CSS Files Selection

You can see many CSS files at dist/css/ folder and may be confused about which one to use. The answer is you can use any of them, all the CSS files are standalone.

The only difference in the files is the theme. The file ../dist/css/smart_wizard_all.css contains all the themes, while the ../dist/css/smart_wizard.css only contains the default theme. Also other files are theme-specific file named with the respective theme names, like ../dist/css/smart_wizard_(theme name).css.

All these files have corresponding min files that compressed for size reduction, those files are recommended unless you don't want to customize the CSS yourself. Ex. ../dist/css/smart_wizard_all.min.css

Advanced Options

with all optional parameters
$('#smartwizard').smartWizard({
  selected: 0, // Initial selected step, 0 = first step
  theme: 'default', // theme for the wizard, related css need to include for other than default theme
  justified: true, // Nav menu justification. true/false
  autoAdjustHeight: true, // Automatically adjust content height
  cycleSteps: false, // Allows to cycle the navigation of steps
  backButtonSupport: true, // Enable the back button support
  enableURLhash: true, // Enable selection of the step based on url hash
  transition: {
      animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
      speed: '400', // Transion animation speed
      easing:'' // Transition animation easing. Not supported without a jQuery easing plugin
  },
  toolbarSettings: {
      toolbarPosition: 'bottom', // none, top, bottom, both
      toolbarButtonPosition: 'right', // left, right, center
      showNextButton: true, // show/hide a Next button
      showPreviousButton: true, // show/hide a Previous button
      toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
  },
  anchorSettings: {
      anchorClickable: true, // Enable/Disable anchor navigation
      enableAllAnchors: false, // Activates all anchors clickable all times
      markDoneStep: true, // Add done css
      markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
      removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared
      enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
  },
  keyboardSettings: {
      keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
      keyLeft: [37], // Left key code
      keyRight: [39] // Right key code
  },
  lang: { // Language variables for button
      next: 'Next',
      previous: 'Previous'
  },
  disabledSteps: [], // Array Steps disabled
  errorSteps: [], // Highlight step with errors
  hiddenSteps: [] // Hidden steps
});
Implement Ajax Contents

Ajax is not built-in, instead you can listen to stepContent event and provide the ajax contents. This is usefull to load ajax contents and give you full control on the ajax calls. The stepContent event can accept Promise as return or you can return the string as the content of the step. The event will be passed with three parameters, anchorObject the jQuery object of the selected step, stepIndex the zero based index number of the steps and stepDirection to give the direction of navigation. Here is an ajax call example with Promise.

// Ajax content loading with "stepContent" event
$("#smartwizard").on("stepContent", function(e, anchorObject, stepIndex, stepDirection) {

    // Read data value from the anchor element
    var repo    = anchorObject.data('repo');
    var ajaxURL = "https://api.npms.io/v2/package/" + repo;

    // Return a promise object
    return new Promise((resolve, reject) => {

      // Ajax call to fetch your content
      $.ajax({
          method  : "GET",
          url     : ajaxURL,
          beforeSend: function( xhr ) {
              // Show the loader
              $('#smartwizard').smartWizard("loader", "show");
          }
      }).done(function( res ) {
          var html = 'Ajax data about ' + repo + ' loaded from GitHub';
          html += 'URL:' + ajaxURL;
          html += 'Name:' + res.collected.metadata.name;

          // Resolve the Promise with the content
          resolve(html);

          // Hide the loader
          $('#smartwizard').smartWizard("loader", "hide");
      }).fail(function(err) {

          // Reject the Promise with error message to show as content
          reject( "An error loading the resource" );

          // Hide the loader
          $('#smartwizard').smartWizard("loader", "hide");
      });

    });
});


// SmartWizard initialize
$('#smartwizard').smartWizard();
Public functions

There are public methods that are handy to do certain functions

goToStep

Allow you to go to a certain step.

// Go to step
$('#smartwizard').smartWizard("goToStep", 3);
setOptions

Allow you to set the options dynamically.

// Change theme
var options = {
  theme: 'dark'
};
$('#smartwizard').smartWizard("setOptions", options);

// Change animation
var options = {
  transition: {
      animation: 'slide-h'
  },
};
$('#smartwizard').smartWizard("setOptions", options);
next

Navigates to next step

// Navigate next
$('#smartwizard').smartWizard("next");
prev

Navigates to previous step

// Navigate previous
$('#smartwizard').smartWizard("prev");
reset

Reset the wizard to initial state

// Reset wizard
$('#smartwizard').smartWizard("reset");
stepState

Change the state of a step

// Disable step
$('#smartwizard').smartWizard("stepState", [1,3], "disable");

// Hide step
$('#smartwizard').smartWizard("stepState", [2], "hide");
getStepIndex

Gets the current step index

// Get current step index
var stepIndex = $('#smartwizard').smartWizard("getStepIndex");
loader

Allow you to show/hide the built-n loader animation.

// Show the loader
$('#smartwizard').smartWizard("loader", "show");

// Hide the loader
$('#smartwizard').smartWizard("loader", "hide");

Parameter Description:

Parameter Description Default
selected (integer) Specify the selected step on the first load 0
theme (string) Theme 'default'
justified (boolean) Nav menu justification true
autoAdjustHeight (boolean) Automatically adjust content height true
cycleSteps (boolean) Keep the navigation cycle through true
backButtonSupport (boolean) Enable the back button support true
enableURLhash (boolean) Enable selection of the step based on url hash true
transition (object) with settings for the transition

animation (string) Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing 'none'
speed (number) Transion animation speed '400'
easing (string) Transition animation easing. Not supported without a jQuery easing plugin ''
toolbarSettings (object) with settings for the toolbar

toolbarPosition (string) Position of the toolbar (none, top, bottom, both) bottom
toolbarButtonPosition (string) Button alignment of the toolbar (left, right, center) right
showNextButton (boolean) show/hide a Next button true
showPreviousButton (boolean) show/hide a Previous button true
toolbarExtraButtons (array of jQuery object) Extra buttons to show on toolbar, array of jQuery input/buttons elements []
anchorSettings (object) with settings for the anchor

anchorClickable (boolean) Enable/Disable anchor navigation true
enableAllAnchors (boolean) Activates all anchors clickable all times false
markDoneStep (boolean) Add done state on navigation true
markAllPreviousStepsAsDone (boolean) When a step selected by url hash, all previous steps are marked done true
removeDoneStepOnNavigateBack (boolean) While navigate back done step after active step will be cleared false
enableAnchorOnDoneStep (boolean) Enable/Disable the done steps navigation true
keyboardSettings (object) with settings for the keyboard navigation

keyNavigation (boolean) Enable/Disable keyboard navigation true
keyLeft (array) Left key code [37]
keyRight (array) Right key code [39]
lang (object) Language variables for button

next (string) Next button label 'Next'
previous (string) Previous button label 'Previous'
disabledSteps (array) Steps disabled []
errorSteps (array) Step with errors []
hiddenSteps (array) Hidden steps []

Event Description

Event Description Parameters
leaveStep Triggers when leaving a step.
This is a decision making event. based on its function return value (true/false) the current navigation can be cancelled.
Object: jQuery object of the anchor element.
Int: Index of the step.
String: Step direction.
showStep Triggers after a step is loaded with content. Object: jQuery object of the step anchor element.
Int: Index of the step.
String: Step direction.
String: Step position.
stepContent Triggers when a step is about to load.
This event will allow you to pass a string value as return parameter. The string value will be used as the content of the step. You can also pass a Promise object and on Promise completion the result will be used as the content of the step. This is usefull to load ajax contents and give you more control on the ajax calls.
Object: jQuery object of the step anchor element.
Int: Index of the step.
String: Step direction.

Event Initialize Examples

// Initialize the leaveStep event
$("#smartwizard").on("leaveStep", function(e, anchorObject, stepIndex, stepDirection) {
   return confirm("Do you want to leave the step "+stepIndex+"?");
});

// Initialize the showStep event
$("#smartwizard").on("showStep", function(e, anchorObject, stepIndex, stepDirection, stepPosition) {
   alert("You are on step "+stepIndex+" now");
});

// Initialize Smart Wizard
$('#smartwizard').smartWizard();

License

Released under the terms of the MIT License (more). You are free to use on both personal and commercial environment as long as the copyright header is left intact.

A little help is always a beautiful thing...

We are committed to deliver free and open source projects. Your support keep us on the track and make us deliver bigger things for you.

Help us improve

jQuery Smart Wizard is a free and open-source project, and we are trying hard to improve the project as per the feedback from you. Please help us finding bugs or issues on this project, or give us an idea for a feature. Also, you are most welcome to improve the code, please create a pull-request on the project repository on GitHub.

Archive

Please see the older versions archive of this plugin.

jQuery Smart Wizard v4 jQuery Smart Wizard v2
Dipu Raj

Dipu Raj

Full-stack developer in JavaScript, PHP and C# with added interest in Angular, React, jQuery and Bootstrap. Believes the code should be as beautiful as the design.