前端插件三：基于Bootstrap的jQuery Wizard向导插件
项目
一个基于Bootstrap的jQuery用户向导插件，该插件允许使用按钮在步骤间切换，还可以单独对某个步骤进行特殊的事件处理。
插件依赖
jQuery 1.3.2+
Bootstrap 3.x
简单使用
HTML
<html>
<head>
<link rel='stylesheet' href='styles/bootstrap.css'>
<link rel='stylesheet' href='styles/libs/wizard/wizard.css'>
</head>
<body>
<div id='rootwizard' class='form-wizard form-wizard-horizontal'>
<form class='form floating-label'>
<div class='form-wizard-nav'>
<div class='progress'><div class='progress-bar progress-bar-primary'></div></div>
<ul class='nav nav-justified'>
<li class='active'>
<a href='#step1' data-toggle='tab'>
<span class='step'>1</span>
<span class='title'>第一步</span>
</a>
</li>
<li>
<a href='#step2' data-toggle='tab'>
<span class='step'>2</span>
<span class='title'>第二步</span>
</a>
</li>
<li>
<a href='#step3' data-toggle='tab'>
<span class='step'>3</span>
<span class='title'>第三步</span>
</a>
</li>
</ul>
</div>
<div class='tab-content clearfix'>
<div class='tab-pane active' id='step1'>
<br/><br/>
<div class='form-group'>
<input type='text' name='first' id='first' class='form-control' required>
<label for='first' class='control-label'>第一步</label>
</div>
</div>
<div class='tab-pane' id='step2'>
<br/><br/>
<div class='form-group'>
<input type='text' name='second' id='second' class='form-control' required>
<label for='second' class='control-label'>第二步</label>
</div>
</div>
<div class='tab-pane' id='step3'>
<br/><br/>
<div class='form-group'>
<input type='text' name='third' id='third' class='form-control' required>
<label for='third' class='control-label'>第三步</label>
</div>
</div>
</div>
</form>
</div>
<script src='scripts/libs/jquery/jquery-1.11.2.min.js'></script>
<script src='scripts/libs/jquery/bootstrap.min.js'></script>
<script src='scripts/libs/jquery/jquery.bootstrap.wizard.min.js'></script>
</body>
</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>
<head>
<link rel='stylesheet' href='styles/bootstrap.css'>
<link rel='stylesheet' href='styles/libs/wizard/wizard.css'>
</head>
<body>
<div id='rootwizard' class='form-wizard form-wizard-horizontal'>
<form class='form floating-label form-validation' role='form' novalidate='novalidate'>
<div class='form-wizard-nav'>
<div class='progress'><div class='progress-bar progress-bar-primary'></div></div>
<ul class='nav nav-justified'>
<li class='active'>
<a href='#step1' data-toggle='tab'>
<span class='step'>1</span>
<span class='title'>第一步：选择类型</span>
</a>
</li>
<li>
<a href='#step2' data-toggle='tab'>
<span class='step'>2</span>
<span class='title'>第二步：填写参数</span>
</a>
</li>
<li>
<a href='#step3' data-toggle='tab'>
<span class='step'>3</span>
<span class='title'>第三步：创建成功</span>
</a>
</li>
</ul>
</div>
<div class='tab-content clearfix'>
<div class='tab-pane active' id='step1'>
<br/><br/>
<div class='col-sm-10 col-sm-offset-1'>
<div class='form-group'>
<select name='type' id='type' class='form-control' required>
<option></option>
<option value='1'>类型一</option>
<option value='2'>类型二</option>
<option value='3'>类型三</option>
<option value='4'>类型四</option>
</select>
<label for='type' class='control-label'>请选择类型</label>
</div>
</div>
</div>
<div class='tab-pane' id='step2'>
<br/><br/>
<div class='col-sm-10 col-sm-offset-1'>
<div class='form-group'>
<input type='text' name='name' id='name' class='form-control' required>
<label for='name' class='control-label'>姓名</label>
</div>
<div class='form-group'>
<input type='email' name='email' id='email' class='form-control' data-rule-email='true' required>
<label for='email' class='control-label'>邮箱</label>
</div>
</div>
</div>
<div class='tab-pane' id='step3'>
<br/><br/>
<h3 class='text-center'>创建成功！</h3>
</div>
</div>
<div class='col-sm-10 col-sm-offset-1 no-padding'>
<ul class='pager wizard'>
<li class='previous first'><a class='btn btn-default' href='javascript:void(0);'>First</a></li>
<li class='previous'><a class='btn btn-default' href='javascript:void(0);'>Previous</a></li>
<li class='next last'><a class='btn btn-default' href='javascript:void(0);'>Last</a></li>
<li class='next'><a class='btn btn-default' href='javascript:void(0);'>Next</a></li>
</ul>
</div>
</form>
</div>
<script src='scripts/libs/jquery/jquery-1.11.2.min.js'></script>
<script src='scripts/libs/jquery/bootstrap.min.js'></script>
<script src='scripts/libs/jquery/jquery.bootstrap.wizard.min.js'></script>
</body>
</html>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;
}
}
});参考文档：
http://vadimg.com/twitter-boo...
http://www.htmleaf.com/jQuery...
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17