Archive: jQuery Smart Wizard v4

The awesome jQuery step wizard plugin with Bootstrap support


Smart Wizard is a flexible and heavily customizable jQuery step wizard plugin with Bootstrap support. Easy to implement and gives a neat and stylish interface for your forms, checkout screen, registration steps. Has a lot of features including the Bootstrap support, themes, customizable toolbars, customizable options, public methods, event support.

Demo

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

Name: Tim Smith
Email: example@example.com
More Examples

Installation

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

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

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

Downloads

Download jQuery Smart Wizard v4.4.1

Features

  • Bootstrap 3 & 4 support
  • Responsive themes
  • Heavily customizable toolbar, option to add extra buttons
  • Theme support with various themes included
  • Customizable css styles
  • Url navigation and step selection
  • Public methods for external function call
  • Enhanced event support
  • In-built reset method
  • Dynamically hide or disable steps
  • Integratable to model window
  • Ajax content loading with option to specify individual url for steps
  • Keyboard navigation
  • Easy navigation with step anchors and navigation buttons
  • Multiple wizard instance on same page
  • Auto content height adjustment
  • Compatible with latest jQuery versions (jQuery 1.9+, jQuery 2+, jQuery 3+)
  • Easy to implement, Minimal HTML required

Documentation

Requirements
  1. Bootstrap 3+
  2. jQuery (supports jQuery 1.9+, jQuery 2+, jQuery 3+)
Include Smart Wizard JavaScript & CSS files
<link href="../dist/css/smart_wizard.css" rel="stylesheet" type="text/css" />
<script src="../dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
Optionally, include the corresponding theme css
<link href="../dist/css/smart_wizard_theme_arrows.css" rel="stylesheet" type="text/css" />
Initialize Smart Wizard
$(document).ready(function(){
  $('#smartwizard').smartWizard();
});
The HTML Markup
This is the basic HTML markup for the Smart Wizard. You can customize it by adding your on steps contents.
<div id="smartwizard">
    <ul>
        <li><a href="#step-1">Step Title<br /><small>Step description</small></a></li>
        <li><a href="#step-2">Step Title<br /><small>Step description</small></a></li>
        <li><a href="#step-3">Step Title<br /><small>Step description</small></a></li>
        <li><a href="#step-4">Step Title<br /><small>Step description</small></a></li>
    </ul>

    <div>
        <div id="step-1" class="">
            Step Content
        </div>
        <div id="step-2" class="">
            Step Content
        </div>
        <div id="step-3" class="">
            Step Content
        </div>
        <div id="step-4" class="">
            Step Content
        </div>
    </div>
</div>

That's it! You can now view the wizard on the page.

Parameter Description:

Parameter Description Values Default
selected specify the selected step on the first load integer 0
keyNavigation enable/disable key navigation.
left/right keys are used if enabled
true/false true
autoAdjustHeight Automatically adjust content height true/false true
cycleSteps Allows to cycle the navigation of steps true/false false
backButtonSupport Enable the back button support true/false true
useURLhash Enable selection of the step based on url hash true/false true
showStepURLhash Show url hash based on step true/false true
contentURL Specify the ajax content url, setting null will disable ajax contents. If you want to use ajax content only for a specific step just add a data-content-url with the anchor tag of the step header null or a valid url null
contentCache On or Off caching of step contents on ajax calls, if false content is fetched always from ajax url true/false true
ajaxSettings Provide extra settings for step ajax content calls Object as per jQuery.ajax( [settings ] ) {}
disabledSteps an array of step numbers to show as disabled zero based array of step index
ex: [2,4]
[]
errorSteps an array of step numbers to show as error steps zero based array of step index
ex: [2,4]
[]
hiddenSteps an array of step numbers to be hidden zero based array of step index
ex: [2,4]
[]
theme name of the theme to use. Remember to include the theme css also String name of the theme 'default'
transitionEffect Animation effect on step navigation none/slide/fade none
transitionSpeed Number or String 400
toolbarSettings An array with grouped settings for the toolbar

Parameter Description Default
toolbarPosition Position of the toolbar (none, top, bottom, both) bottom
toolbarButtonPosition Position of the toolbar buttons (left, right) right
showNextButton show/hide a Next button true
showPreviousButton show/hide a Previous button true
toolbarExtraButtons Specify the extra buttons and its events to show on toolbar. []
anchorSettings An array with grouped settings for the anchor

Parameter Description Default
anchorClickable Enable or disable the click option on the step header anchors true
enableAllAnchors Enable all anchors on load false
markDoneStep Make already visited steps as done true
markAllPreviousStepsAsDone When a step selected by url hash, all previous steps are marked done true
removeDoneStepOnNavigateBack While navigate back done step after active step will be cleared false
enableAnchorOnDoneStep Enable/Disable the done steps navigation true
lang An array with language variables

Parameter Description Default
next Text for next button next
previous Text for next previous previous

Example: Smart Wizard Initialize with all option parameters

This example shows how to call Smart Wizard using all option parameters, but you can pass the only options that you want to set a different value than the default.
// Smart Wizard
$('#smartwizard').smartWizard({
      selected: 0,  // Initial selected step, 0 = first step
      keyNavigation:true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
      autoAdjustHeight:true, // Automatically adjust content height
      cycleSteps: false, // Allows to cycle the navigation of steps
      backButtonSupport: true, // Enable the back button support
      useURLhash: true, // Enable selection of the step based on url hash
      lang: {  // Language variables
          next: 'Next',
          previous: 'Previous'
      },
      toolbarSettings: {
          toolbarPosition: 'bottom', // none, top, bottom, both
          toolbarButtonPosition: 'right', // left, right
          showNextButton: true, // show/hide a Next button
          showPreviousButton: true, // show/hide a Previous button
          toolbarExtraButtons: [
$('<button></button>').text('Finish')
		      .addClass('btn btn-info')
		      .on('click', function(){
			alert('Finsih button click');
		      }),
$('<button></button>').text('Cancel')
		      .addClass('btn btn-danger')
		      .on('click', function(){
			alert('Cancel button click');
		      })
                ]
      },
      anchorSettings: {
          anchorClickable: true, // Enable/Disable anchor navigation
          enableAllAnchors: false, // Activates all anchors clickable all times
          markDoneStep: true, // add done css
          enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
      },
      contentURL: null, // content url, Enables Ajax content loading. can set as data data-content-url on anchor
      disabledSteps: [],    // Array Steps disabled
      errorSteps: [],    // Highlight step with errors
      theme: 'dots',
      transitionEffect: 'fade', // Effect on navigation, none/slide/fade
      transitionSpeed: '400'
});

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 step navigation can be cancelled.
Object: object of the step anchor element.
Int: Index of the step.
String: Direction of the navigation. ex. forward, backward.
showStep Triggers when showing a step. Object: object of the step anchor element.
Int: Index of the step.
String: Direction of the navigation. ex. forward, backward. It will pass empty string on page load and reset since there is no direction associated.
beginReset Triggers when reset action starts.
This is a decision making event. based on its function return value (true/false) the reset action can be cancelled.
endReset Triggers when reset action ends. String: name of the theme.
themeChanged Triggers when theme is changed.

Example: Event Initialize

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

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

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

// Initialize the beginReset event
$("#smartwizard").on("beginReset", function(e) {
  return confirm("Do you want to reset the wizard?");
});

// Initialize the endReset event
$("#smartwizard").on("endReset", function(e) {
  alert("endReset called");
});

// Initialize the themeChanged event
$("#smartwizard").on("themeChanged", function(e, theme) {
  alert("Theme changed. New theme name: " + theme);
});

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.

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.