Archive: jQuery Smart Wizard v4

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

More Examples

• Basic Example
• Input Validation
• Events
• With Modal Dialog

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>

<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

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

Parameter Description:

Example: Smart Wizard Initialize with all option parameters

// 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:

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);
});