这是一款非常实用的基于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