jQuery Smart Wizard 4: Documentation

Requirements

1. Bootstrap 3+
2. jQuery (supports jQuery 1.9+, jQuery 2+, jQuery 3+)

Installation

NPM

npm install smartwizard

Bower

bower install smartwizard

Composer

composer require techlab/smartwizard

Download

Get the latest source files from Github Download

How to use

Include Bootstrap CSS (ignore this if you have already included on the page)

You can use CDN or your own Bootstrap installation

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

Include SmartWizard CSS

<link href="../dist/css/smart_wizard.css" rel="stylesheet" type="text/css" /> 

Optionally, If you want to use the theme include the corresponding theme css

<link href="../dist/css/smart_wizard_theme_arrows.css" rel="stylesheet" type="text/css" />

Include HTML

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>

Include jQuery (ignore this if you have already included on the page)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Include SmartWizard JavaScript source

<script type="text/javascript" src="../dist/js/jquery.smartWizard.min.js"></script>

Call the SmartWizard plugin

<script type="text/javascript">
$(document).ready(function(){
  $('#smartwizard').smartWizard();
});
</script>

That's it! You can see the wizard on the page.
Continue reading to know more about parameters, events and customization.

Parameter Description:

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.

<script type="text/javascript">
  $(document).ready(function() {
      
      // 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'
      });
      
  }); 
</script>

Event Description:

Example: Event Initialize

<script type="text/javascript">
  $(document).ready(function() {
      // 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);
      });
      
  }); 
</script>