- 废话
有一块需求是 有多步表单 点击下一步时触发验证一个范围内的表单,点击上一步或取消,清空表单并返回第一步,点击最后一步提交整个表单的
就找到了这个插件,本来自己写了一个原生的 form+table 点击下一步隐藏所有table 显示当前步骤table的控件,但是老大说丑,嗯哼 就找了这个。
github上的地址,其实已经有 很明确的官方文档了:
https://github.com/VinceG/twitter-bootstrap-wizard
2.可能不是废话
首先 要按顺序引入css文件和js文件
<link rel="stylesheet" type="text/css" media="screen" href="${ctx }/resources/css/bootstrap.min.css" />
<script src="${ctx }/resources/js/jquery-2.2.4.min.js"></script>
<script src="${ctx }/resources/js/bootstrap.min.js"></script>
<script src="${ctx }/resources/js/jquery.bootstrap.wizard.min.js"></script>
先放页面的代码
<div class="group ui-corner-all"style="text-align:center">
<div class="col-md-8 eq-box-md eq-no-panel col-center-block">
<div class="panel">
<!-- Classic Form Wizard -->
<!--===================================================-->
<div id="demo-cls-wz">
<!--Nav-->
<ul class="wz-nav-off wz-icon-inline wz-classic">
<li class="col-xs-6 bg-info active">
<a data-toggle="tab" href="#demo-cls-tab1" aria-expanded="true">
第一步
</a>
</li>
<li class="col-xs-6 bg-info">
<a data-toggle="tab" href="#demo-cls-tab2" aria-expanded="false">
第二步
</a>
</li>
</ul>
<!--Progress bar-->
<div class="progress progress-xs progress-striped active">
<div class="progress-bar progress-bar-dark" style="width: 50%;"></div>
</div>
<!--Form-->
<form class="form-horizontal mar-top">
<div class="panel-body">
<div class="tab-content">
<!--First tab-->
<div id="demo-cls-tab1" class="tab-pane active in">
<div class="form-group">
<label class="col-lg-3 control-label">XX代码</label>
<div class="col-lg-7">
<input type="text" class="form-control" name="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">企业代码</label>
<div class="col-lg-7">
<input type="email" class="form-control" name="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">XX经办人</label>
<div class="col-lg-7">
<input type="text" placeholder="First name" name="firstName" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">XX经办人联系电话</label>
<div class="col-lg-7">
<input type="text" placeholder="Last name" name="lastName" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">BB联系人</label>
<div class="col-lg-7">
<input type="text" placeholder="Address" name="address" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">BB联系电话</label>
<div class="col-lg-7">
<input type="text" placeholder="Address" name="address" class="form-control">
</div>
</div>
</div>
<!--Second tab-->
<div id="demo-cls-tab2" class="tab-pane fade">
<div class="form-group">
<label class="col-lg-3 control-label">报告资料</label>
<div class="col-lg-7">
<input class="form-control" type="file" name="" id="file" accept="image/jpg, image/jpeg" onchange="xmTanUploadImg(this)"/>
<span id="opt">
<a href="javascript:preview();" id="preview" >预览</a>
<input type="button" value="删除" id="delBtn"/>
</span>
</div>
</div>
</div>
</div>
</div>
<!--Footer button-->
<div class="panel-footer text-right">
<div class="box-inline">
<button type="button" class="previous btn btn-mint disabled">取消</button>
<button type="button" class="next btn btn-mint" style="display: inline-block;">下一步</button>
<button type="button" class="btn btn-warning" style="display: none;">上传</button>
<button type="button" class="finish btn btn-mint" onclick="fb()" style="display: none;">提交</button>
</div>
</div>
</form>
</div>
<!--===================================================-->
<!-- End Classic Form Wizard -->
再放js初始化的代码
// =================================================================
$(function(){
$('#demo-cls-wz').bootstrapWizard({
tabClass : 'wz-classic',
nextSelector : '.next',
progressBarCurrent: true,
previousSelector : '.previous',
onTabClick: function(tab, navigation, index) {
return false;
},
//下一步事件绑定 index 从0开始
onNext:function(tab, navigation, index){
if(index == 1){
//检验表单
}
},
onPrevious:function(){
if(confirm("是否放弃申请?")){
$("#form")[0].reset();
return true;
}else{
return false;
}
},
onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
var wdt = 100/$total;
var lft = wdt*index;
$('#demo-cls-wz').find('.progress-bar').css({width:$percent+'%'});
// If it's the last tab then hide the last button and show the finish instead
if($current >= $total) {
$('#demo-cls-wz').find('.next').hide();
$('#demo-cls-wz').find('.finish').show();
} else {
$('#demo-cls-wz').find('.next').show();
}
}
});
})
最后的效果就是这样子的
============然后勒,官网还提供了一个demo,属性、触发事件和方法=====
http://vinceg.github.io/twitter-bootstrap-wizard/
//官网给的初始化插件的方法
$(document).ready(function() {
$('#rootwizard').bootstrapWizard();
});
//初始化时带上初始参数并且绑定事件
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
tabClass: 'nav nav-pills',
//绑定点击下一步的事件,传入参数为面板tab,标题头navigation,步骤序号index(从0开始)
onNext: function(tab, navigation, index) {
alert('next');
}
});
});
//调用方法 此处为展示 第三步的tab
$('#rootwizard').bootstrapWizard('show',3);
偷文档
Options
Key | Default | Description |
---|---|---|
withVisible | true | Find only visible li step elements. Set to `false` if your steps display is hidden. |
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 |
Events
Key | Description |
---|---|
onInit | Fired when plugin is initialized |
onShow | Fired when plugin data is shown |
onNext | Fired when next button is clicked (return false to disable moving to the next step) |
onPrevious | Fired when previous button is clicked (return false to disable moving to the previous step) |
onFirst | Fired when first button is clicked (return false to disable moving to the first step) |
onLast | Fired when last button is clicked (return false to disable moving to the last step) |
onBack | Fired when back button is clicked (return false to disable moving backwards in navigation history) |
onFinish | Fired when finish button is clicked (return value is irrelevant) |
onTabChange | Fired when a tab is changed (return false to disable moving to that tab and showing its contents) |
onTabClick | Fired when a tab is clicked (return false to disable moving to that tab and showing its contents) |
onTabShow | Fired when a tab content is shown (return false to disable showing that tab content) |
Methods
Key | Parameters | Description |
---|---|---|
next | Moves to the next tab | |
previous | Moves to the previous tab | |
first | Jumps to the first tab | |
last | Jumps to the last tab | |
back | Moves back in navigation history by jumping to the former tab | |
finish | "Finishes" the wizard by calling onFinish callback | |
show | zero based index or tab target id | Jumps to the specified tab |
currentIndex | Returns the zero based index number for the current tab | |
navigationLength | Returns the number of tabs | |
enable | zero based index | Enables a tab, allows a user to click it (removes .disabled if the item has that class) |
disable | zero based index | Disables a tab, disallows a user to click it (adds .disabled to the li element) |
display | zero based index | Displays the li element if it was previously hidden |
hide | zero based index | Hides the li element (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 |