[Bootstrap] Easily Create Self-Managed Wizards With jQuery | jq-wizard.js

jQuery Wizard is a component for creating separately managed wizards, using jQuery. jq-wizard.js extension for creating a practical and interactive wizard interface by breaking long content blocks into individual steps.

jquery wizard example, jquery smart wizard, jquery bs wizard, jquery form wizard, jquery steps, jquery form wizard with validation, jquery steps example

How to make use of it:

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

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

2. Create steps along 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 allow the wizard interface.

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

4. Config the wizard interface with the next choices.

$('#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 }, 

});

Easy Wizard Control In jQuery, form wizard bootstrap, jQuery Wizard Plugin/Github

jQuery-Multi-Step-Wizard-Plugin-Demo


See Demo And Download

Official Website(dealfonso): Click Here

This superior jQuery/javascript plugin is developed by dealfonso. For extra Advanced Usage, please go to the official website.

Share