Twitter Bootstrap Wizard

This Twitter Bootstrap plugin builds a wizard using a formatted tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.

Website & Demo

Code Examples

//basic wizard
$(document).ready(function() {
	$('#rootwizard').bootstrapWizard();
});

//wizard with options and events
$(document).ready(function() {
	$('#rootwizard').bootstrapWizard({
		tabClass: 'nav nav-pills',
		onNext: function(tab, navigation, index) {
			alert('next');
  		}
  });
});

//calling a method
$('#rootwizard').bootstrapWizard('show',3);

Options

Key	Default	Description
tabClass	'nav nav-pills'	ul navigation class
nextSelector	'.wizard li.next'	next element selector
previousSelector	'.wizard li.previous'	previous element selector
firstSelector	'.wizard li.first'	first element selector
lastSelector	'.wizard li.last'	last element selector

Events

Key	Description
onInit	Fired when plugin is initialized
onShow	Fired when plugin data is shown
onNext	Fired when next button is clicked (return false to disable moving to the next step)
onPrevious	Fired when previous button is clicked (return false to disable moving to the previous step)
onFirst	Fired when first button is clicked (return false to disable moving to the first step)
onLast	Fired when last button is clicked (return false to disable moving to the last step)
onTabClick	Fired when a tab is clicked (return false to disable moving to that tab and showing it's contents)
onTabShow	Fired when a tab content is shown (return false to disable showing that tab content)

Methods

Key	Parameters	Description
next		Moves to the next tab
previous		Moves to the previous tab
first		Jumps to the first tab
last		Jumps to the last tab
show	zero based index	Jumps to the specified tab
currentIndex		Returns the zero based index number for the current tab
navigationLength		Returns the number of tabs

© Vadim Vincent Gabriel 2012