这是一款非常实用的基于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 |
版权声明
版权说明:
仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!