Flexible Bootstrap Plugin To Create Wizard Style Interface - Smart Wizard

Flexible Bootstrap Plugin To Create Wizard Style Interface - Smart Wizard
File Size: 78.5 KB
Views Total: 32951
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Smart Wizard is a jQuery wizard plugin that lets you split long content into a step-by-step interactive wizard interface. Great for form wizard and step based tour guide.

More features:

  • AJAX enabled.
  • Accessibility.
  • Dark Mode
  • Events supported.
  • Styled with Bootstrap.
  • 4 built-in themes.
  • Supports URL hash.
  • Creates a step bar that shows the current step.
  • Keyboard navigation.
  • Supports both Bootstrap 4 and Bootstrap 3.

Basic usage:

1. Load the Bootstrap's stylesheet in the webpage (OPTIONAL Since v5.0.0).

<link rel="stylesheet" href="bootstrap.min.css" />

2. Load the core stylesheet SmartWizard.css and a theme CSS of your choice in the webpage.

<!-- Core Stylesheet -->
<link href="./dist/css/smart_wizard.min.css" rel="stylesheet" />
<!-- Optional SmartWizard themes -->
<link href="./dist/css/smart_wizard_theme_arrows.min.css" rel="stylesheet">
<link href="./dist/css/smart_wizard_theme_dots.min.css" rel="stylesheet">
<link href="./dist/css/smart_wizard_dark.min.css" rel="stylesheet">
<link href="./dist/css/smart_wizard_progress.min.css" rel="stylesheet">

<!-- All In One -->
<link href="./dist/css/smart_wizard_all.min.css" rel="stylesheet" />

3. The basic HTML structure for the smart wizard.

<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>
   ... more nav items here ...
  </ul>

  <div class="tab-content">
   <div id="step-1" class="tab-pane" role="tabpanel">
      Step 1
   </div>
   <div id="step-2" class="tab-pane" role="tabpanel">
      Step 2
   </div>
   <div id="step-3" class="tab-pane" role="tabpanel">
      Step 3
   </div>
   ... more steps here ...
  </div>
</div>

4. Load jQuery library and the jQuery Smart Wizard plugin's script at the end of the webpage.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="./dist/js/jquery.smartWizard.min.js"></script>

5. Initialize the smart wizard with default options. That's it.

$('#smartwizard').smartWizard();

6. This example shows how to load steps from an external data source via AJAX:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#step-1" data-repo="jquery-smarttab">
      <strong>SmartTab</strong><br />repository details from GitHub
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#step-2" data-repo="smartwizard">
      <strong>SmartWizard</strong><br />repository details from GitHub
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#step-3" data-repo="jquery-smartcart">
      <strong>SmartCart</strong><br />repository details from GitHub
    </a>
  </li>
</ul>
$("#smartwizard").on("stepContent", function(e, anchorObject, stepIndex, stepDirection) {

  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 ) {
        // console.log(res);

        var html = '<h2>Ajax data about ' + repo + ' loaded from GitHub</h2>';
        html += '<br>URL: <strong>' + ajaxURL + '</strong>';
        html += '<br>Name: <strong>' + res.collected.metadata.name + '</strong>';
        html += '<br>Description: ' + res.collected.metadata.description;
        html += '<br>Homepage: <a href="' + res.collected.github.homepage + '" >'+ res.collected.github.homepage +'</a>';
        html += '<br>Keywords: ' + res.collected.metadata.keywords.join(', ');

        // html += '<br>Clone URL: ' + res.clone_url;
        html += '<br>Stars: ' + res.collected.github.starsCount;
        html += '<br>Forks: ' + res.collected.github.forksCount;
        html += '<br>Watchers: ' + res.collected.github.subscribersCount;
        html += '<br>Open Issues: ' + res.collected.github.issues.openCount + '/' + res.collected.github.issues.count;

        html += '<br><br>Popularity: ' + parseInt(res.score.detail.popularity * 100);
        html += '<br>Quality: ' + parseInt(res.score.detail.quality * 100);
        html += '<br>Maintenance: ' + parseInt(res.score.detail.maintenance * 100);

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

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

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

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

  });
});

7. All default options which can be used to easily customize your wizard.

$('#smartwizard').smartWizard({

  // Initial selected step, 0 = first step 
  selected: 0,  

  // Theme
  theme: 'default',

  // Nav menu justification. true/false
  justified: true,

  // Automatically adjust content height
  autoAdjustHeight:true, 

  // Allow to cycle the navigation of steps
  cycleSteps: false, 

  // Enable the back button support
  backButtonSupport: true, 

  // Enable selection of the step based on url hash
  useURLhash: true, 

  // Show url hash based on step 
  enableURLhash: true, 

  // Config transitions
  transition: {

    // none/fade/slide-horizontal/slide-vertical/slide-swing
    animation: 'none',

    // transition speed
    speed: '400',

    // easing function
    easing: ''

  },

  // Enable keyboard navigation
  keyboardSettings: {
    keyNavigation: true,
    keyLeft: [37],
    keyRight: [39]
  },

  // Language variables
  lang: {  
    next: 'Next', 
    previous: 'Previous'
  },

  // step bar options
  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: []
  }, 

  // anchor options
  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
  },     

  // Array of disabled Steps
  disabledSteps: [],    

  // Highlight step with errors
  errorSteps: [],    

  // Hidden steps
  hiddenSteps: []
  
});

8. Available event handlers.

// Initialize the leaveStep event
$("#smartwizard").on("leaveStep", function(e, anchorObject, stepIndex, nextStepNumber, stepDirection) {
  // do something
});

// Initialize the showStep event
$("#smartwizard").on("showStep", function(e, anchorObject, stepIndex, stepDirection, stepPosition) {
  // do something
});

// Initialize the beginReset event
$("#smartwizard").on("stepContent", function(e, anchorObject, stepIndex, stepDirection) {
  // do something
});

9. Available API methods to create your own wizard controls.

// goto a specific step
$('#smartwizard').smartWizard('goToStep', stepIndex);

// update options
$('#smartwizard').smartWizard('setOptions', stepIndex);

// goto the next step
$('#smartwizard').smartWizard('next');

// goto the prev step
$('#smartwizard').smartWizard('prev');

// reset the wizard
$('#smartwizard').smartWizard('reset');

// change the state of step(s)
$('#smartwizard').smartWizard("stepState", [1,3], "disable");
$('#smartwizard').smartWizard("stepState", [2], "hide");

// get the current 
var stepIndex = $('#smartwizard').smartWizard("getStepIndex");

// show/hide content loader
$('#smartwizard').smartWizard("loader", "show");
$('#smartwizard').smartWizard("loader", "hide");

Changelog:

v5.1.1 (2020-07-11)

  • Added: Accessibility
  • Added: Dark Mode support for all themes
  • Added: New theme (Progress)
  • Added: leaveStep event has new parameter => nextStepIndex
  • Added: UMD (Universal Module Definition) support
  • Fixed: Incorrect stepDirection on leaveStep event

v5.0.0 (2020-05-24)

  • Complete rewrite of JavaScript and CSS
  • CSS to SCSS
  • Updated all build packages
  • External Ajax content support via Promise
  • New navigation animations added
  • New themes added
  • New public functions
  • New content loading event
  • Standalone CSS with Bootstrap compatibility

v4.4.1 (2020-02-16)

  • Added goToStep and hiddenSteps methods
  • Build system packages updated to latest available.

v4.3.1 (2018-03-12)

  • Bootstrap 4 support, bug fixes and improvements

v4.2.2 (2017-03-27)

  • Small fixes and multiple wizard example added

v4.2.1 (2017-03-27)

  • Dots and Circles themes updated to new design and made responsive

v4.1.7 (2017-02-21)

  • Dots and Circles themes updated to new design and made responsive

v4.1.5 (2017-02-01)

  • JS & CSS update

v4.1.2 (2017-01-09)

  • JS & CSS update

v4.1.1 (2016-12-08)

  • many improvements and additions

2016-11-16

  • Updated to version v4.0.5

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