bootstrapwizard 参数_前端插件三：基于Bootstrap的jQuery Wizard向导插件
项目
一个基于Bootstrap的jQuery用户向导插件，该插件允许使用按钮在步骤间切换，还可以单独对某个步骤进行特殊的事件处理。
插件依赖
jQuery 1.3.2+
Bootstrap 3.x
简单使用
HTML
第一步
第二步
第三步
JavaScript
$(document).ready(function() {
$('#rootwizard').bootstrapWizard();
});
选项
tabClass
默认值：'nav nav-pills'
ul导航的class。
nextSelector
默认值：'.wizard li.next'
“下一步”元素选择器。
previousSelector
默认值：'.wizard li.previous'
“上一步”元素选择器。
firstSelector
默认值：'.wizard li.first'
“第一步”元素选择器。
lastSelector
默认值：'.wizard li.last'
“最后一步”元素选择器。
backSelector
默认值：'.wizard li.back'
“返回”元素选择器。
finishSelector
默认值：'.wizard li.finish'
“完成”元素选择器。
事件
onInit
初始化用户向导插件时触发。
onShow
显示用户向导插件时触发。
onNext
“下一步”按钮点击时触发(return false时禁止点击)。
onPrevious
“上一步”按钮点击时触发(return false时禁止点击)。
onFirst
“第一步”按钮被点击时触发(return false时禁止点击)。
onLast
“最后一步”按钮被点击时触发(return false时禁止点击)。
onBack
“返回”按钮被点击时触发(return false禁止在导航历史中后退)
onFinish
“完成”按钮被点击时触发(返回不相关的值)。
onTabChange
Tab改变时触发(return false时禁止改变和显示内容)。
onTabClick
Tab点击时触发(return false时禁止改变和显示内容)。
onTabShow
Tab内容显示时触发(return false时禁止该内容显示)。
方法
next()
移动到下一个Tab。
previous()
移动到上一个Tab。
first()
跳转到第一个Tab。
last()
跳转到最后一个Tab。
finish()
结束用户向导并调用onFinish回调函数。
show(index/id)
跳转到指定的tab(index从0开始)。
currentIndex()
获取当前tab索引(从0开始的数字)。
navigationLength()
返回tabs的数量。
enable(index)
允许用户点击某个tab(如果li中含有 .disabled class则删除)。
disable(index)
禁止用户点击某个tab(在li元素上添加 .disabled class)。
display(index)
如果前一个li元素是隐藏的则显示它。
hide(index)
隐藏li元素(不会从DOM中删除)。
remove(index,optinalBool)
optinalBool：可选布尔值，默认为false。
删除li元素(从DOM中删除，如果optinalBool为true则同时删除tab-pane元素)。
完整案例
HTML
JavaScript
// 处理选项卡显示(显示进度条)
_handleTabShow(tab, navigation, index, wizard) {
var total = navigation.find('li').length;
var current = index + 0;
var percent = (current / (total - 1)) * 100;
var percentWidth = 100 - (100 / total) + '%';
navigation.find('li').removeClass('done');
navigation.find('li.active').prevAll().addClass('done');
wizard.find('.progress-bar').css({width: percent + '%'});
$('.form-wizard-horizontal').find('.progress').css({'width': percentWidth});
};
// 初始化向导插件
$('#rootwizard').bootstrapWizard({
onTabShow: function(tab, navigation, index) {
_handleTabShow(tab, navigation, index, $('#rootwizard'));
},
onNext: function(tab, navigation, index) {
var form = $('#rootwizard').find('.form-validation');
var valid = form.valid();
if(!valid) {
form.data('validator').focusInvalid();
return false;
}
}
});