Easy Wizard Control In jQuery - jq-wizard.js

jq-wizard.js is a small jQuery plugin to create a practical and interactive wizard interface by breaking down long content blocks (like form groups and content sections) into individual steps.

How to use it:

1. To get started, download the plugin and put the jq-wizard.js script after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jq-wizard.js"></script>

2. Create steps together with Prev and Next navigation buttons for the wizard interface.

<div id="example">
  <div class="wizard-tab" stepname="step1">
    <h1>This is the first step</h1>
  </div>
  <div class="wizard-tab" stepname="step2">
    <h1>This is the second step</h1>
  </div>
  <div class="wizard-tab" stepname="step3">
    <h1>This is the last step</h1>
  </div>
  <div>
    <div class="step"></div>
    <div class="step"></div>
    <div class="step"></div>
  </div>
  <div>
    <button class="btn-prev">Prev</button>
    <button class="btn-next">Next</button>
    <button class="btn-end">Done</button>
  </div>
</div>  

3. Call the plugin to enable the wizard interface.

$(function() {
  $('#example').wizard();
})

4. Config the wizard interface with the following options.

$('#example').wizard({

  // Selector to select the step indicators
  stepobject: '.step',

  // Class used to mark those steps that have already been done                             
  stepactiveclass: 'active',

  // Selector for each tab                        
  tabselector: 'div.wizard-tab',

  // Attribute used to provide the name of the step              
  stepnameattr: 'stepname',

  // Hides "next" button if disabled
  autohidenext: true,     

  // Hides "prev" button if disabled
  autohideprev: false,

  // Hides "end" button if disabled
  autohideend: true,      

  // Automatically sets the focus on the first input INSIDE the tab, when shown
  autofocus: true,

  // Called when an object has to be hidden (e.g. the wizard-tab div or btn-prev button (if autohideprev is true)); 
  // maybe you want to set a custom class, instead; receives the jquery obj as parameter
  hidefnc: function($obj) { $obj.hide() },

  // Called when an object has to be shown (e.g. the wizard-tab div or btn-prev button (if autohideprev is true)); 
  // maybe you want to set a custom class, instead; receives the jquery obj as parameter
  showfnc: function($obj) { $obj.show() },  

});

5. Event handlers.

$('#example').wizard({

  // Called *before* passing to the next step (will go to next in case that returns true)
  onnext: function(stepname, steppos) { return true },

  // Called *before* passing to the prev step (will go to next in case that returns true)
  onprev: function(stepname, steppos) { return true },   

  // Called when showing a step (if arrived clicking on "next" button, will be called *AFTER* onnext or onprev)  
  onstep: function(stepname, steppos) { return true },   

  // Called *before* accepting the end click (will execute the default behaviour of the command in case that returns true)  
  onend: function(stepname, steppos) { return true }, 

  // Called whenever the script "begin" is called     
  onbegin: function() { return true }, 

});

---

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