Sequential Step Wizard Plugin with jQuery and Bootstrap - Twitter Bootstrap Wizard

Twitter Bootstrap Wizard is a jQuery plugin that uses Bootstrap's tabs & pills components to generate an interactive step-by-step wizard UI with support for invoking different callbacks at different steps.

More features:

• Progress bar supported.
• Tons of API methods and events.
• Next / prev navigation.
• Step validation based on jzaefferer's jQuery Validation plugin.

Basic usage:

1. Include jQuery library and the jQuery Twitter Bootstrap Wizard plugin in your Bootstrap project.

<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="jquery.bootstrap.wizard.js"></script>

2. The basic Html structure for the step wizard UI.

<div id="example">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
  <ul>
      <li><a href="#tab1" data-toggle="tab">First</a></li>
    <li><a href="#tab2" data-toggle="tab">Second</a></li>
    <li><a href="#tab3" data-toggle="tab">Third</a></li>
    <li><a href="#tab4" data-toggle="tab">Forth</a></li>
    <li><a href="#tab5" data-toggle="tab">Fifth</a></li>
    <li><a href="#tab6" data-toggle="tab">Sixth</a></li>
    <li><a href="#tab7" data-toggle="tab">Seventh</a></li>
  </ul>
   </div>
    </div>
  </div>
  <div class="tab-content">
      <div class="tab-pane" id="tab1">
        1
      </div>
      <div class="tab-pane" id="tab2">
        2
      </div>
    <div class="tab-pane" id="tab3">
      3
      </div>
    <div class="tab-pane" id="tab4">
      4
      </div>
    <div class="tab-pane" id="tab5">
      5
      </div>
    <div class="tab-pane" id="tab6">
      6
      </div>
    <div class="tab-pane" id="tab7">
      7
      </div>
    <ul class="pager wizard">
      <li class="previous first" style="display:none;"><a href="#">First</a></li>
      <li class="previous"><a href="#">Previous</a></li>
      <li class="next last" style="display:none;"><a href="#">Last</a></li>
        <li class="next"><a href="#">Next</a></li>
    </ul>
  </div>
</div>

3. Call the function on the top element to active the plugin.

$('#example').bootstrapWizard();

4. Default plugin options.

$('#example').bootstrapWizard({

  // Find only visible li step elements.
  withVisible:      true,

  // CSS selectors
  tabClass:         'nav nav-pills',
  nextSelector:     '.wizard li.next',
  previousSelector: '.wizard li.previous',
  firstSelector:    '.wizard li.first',
  lastSelector:     '.wizard li.last',
  finishSelector:   '.wizard li.finish',
  backSelector:     '.wizard li.back',
  
});

5. Callback functions.

$('#example').bootstrapWizard({

  // Fired when plugin data is shown
  onShow:           null,

  // Fired when plugin is initialized
  onInit:           null,

  // Fired when next button is clicked 
  // Return false to disable moving to the next step
  onNext:           null,

  // Fired when previous button is clicked 
  // Return false to disable moving to the previous step
  onPrevious:       null,

  // Fired when last button is clicked
  // Return false to disable moving to the last step
  onLast:           null,

  // Fired when first button is clicked
  // Return false to disable moving to the first step
  onFirst:          null,

  // Fired when finish button is clicked
  // Return value is irrelevant
  onFinish:         null,

  // Fired when back button is clicked
  // Return false to disable moving backwards in navigation history
  onBack:           null,

  // Fired when a tab is changed
  // Return false to disable moving to that tab and showing its contents
  onTabChange:      null,

  // Fired when a tab is clicked
  // Return false to disable moving to that tab and showing its contents
  onTabClick:       null,

  // Fired when a tab content is shown
  // Return false to disable showing that tab content
  onTabShow:        null

});

6. API methods.

• next: Moves to the next tab
• previous: Moves to the previous tab
• first: Jumps to the first tab
• last: Jumps to the last tab
• back: Moves back in navigation history by jumping to the former tab
• finish: "Finishes" the wizard by calling onFinish callback
• show: Jumps to the specified tab
• currentIndex: Returns the zero based index number for the current tab
• navigationLength: Returns the number of tabs
• enable: Enables a tab, allows a user to click it (removes .disabled if the item has that class)
• disable: Disables a tab, disallows a user to click it (adds .disabled to the li element)
• display: Displays the li element if it was previously hidden
• hide: Hides the li element (will not remove it from the DOM)
• remove: Removes the li element from the DOM if second argument is true will also remove the tab-pane element

Change log:

2017-03-18

• JS update

---

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