基于Bootstrap的jQuery用户向导插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款非常实用的基于Twitter Bootstrap的jQuery用户向导插件。该Bootstrap用户向导插件允许你使用按钮来在各个不同的操作步骤之间来回切换，还可以单独对某个步骤进行特殊的事件处理。

插件依赖

Requires jQuery v1.3.2 or later
Bootstrap 3.x

示例代码

//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);

配置参数

选项	默认值	描述
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
backSelector	'.wizard li.back'	back element selector
finishSelector	'.wizard li.finish'	finish element selector

事件

名称	描述
onInit	用户向导插件初始化时触发
onShow	用户向导插件数据显示时触发
onNext	next 按钮被点击时触发(return false to disable moving to the next step)
onPrevious	previous 按钮被点击时触发(return false to disable moving to the previous step)
onFirst	first 按钮被点击时触发(return false to disable moving to the first step)
onLast	last 按钮被点击时触发(return false to disable moving to the last step)
onBack	back 按钮被点击时触发(return false to disable moving backwards in navigation history)
onFinish	finish 按钮被点击时触发(return value is irrelevant)
onTabChange	在Tab改变时触发(return false to disable moving to that tab and showing its contents)
onTabClick	在Tab被点击时触发(return false to disable moving to that tab and showing its contents)
onTabShow	在Tab内容显示时触发(return false to disable showing that tab content)

方法

名称	参数	描述
next		移动到下一个tab
previous		移动到前一个tab
first		跳转到第一个tab
last		跳转到最后一个tab
finish		结束用户向导并调用`onFinish`回调函数
show	基于0的index或目标id	跳转到指定的tab
currentIndex		Returns the zero based index number for the current tab
navigationLength		返回tabs的数量
enable	zero based index	允许用户点击某个tab(removes .disabled if the item has that class)
disable	zero based index	禁止用户点击某个tab(adds .disabled to the li element)
display	zero based index	如果前一个`li`元素是隐藏的则显示它
hide	zero based index	隐藏`li`元素(will not remove it from the DOM)
remove	zero based index, optinal bool remove tab-pane element or not false by default	Removes the li element from the DOM if second argument is true will also remove the tab-pane element