BootstrapWizard多步表单控件
1. 废话
有⼀块需求是 有多步表单 点击下⼀步时触发验证⼀个范围内的表单，点击上⼀步或取消，清空表单并返回第⼀步，点击最后⼀步提交整个表单的
就找到了这个插件，本来⾃⼰写了⼀个原⽣的 form+table 点击下⼀步隐藏所有table 显⽰当前步骤table的控件，但是⽼⼤说丑，嗯哼 就找了这个。
github上的地址，其实已经有 很明确的官⽅⽂档了：
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">
<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="fal">
第⼆步
</a>
</li>
</ul>
<!--Progress bar-->
ugg怎么读<div class="progress progress-xs progress-striped active">
<div class="progress-bar progress-bar-dark" ></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="urname" placeholder="Urname">
<input type="text" class="form-control" name="urname" placeholder="Urname">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">企业代码</label>
vacance
<div class="col-lg-7">
<input type="email" class="form-control" name="email" placeholder="Email">
</div>
</div>
strict是什么意思
<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" >下⼀步</button>
<button type="button" class="btn btn-warning" >上传</button>
<button type="button" class="finish btn btn-mint" onclick="fb()" >提交</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 fal;
},英语专业就业方向
//下⼀步事件绑定 index 从0开始
onNext:function(tab, navigation, index){
if(index == 1){
conexant
//检验表单
}
},
pewpew短信是什么意思onPrevious:function(){
if(confirm("是否放弃申请?")){
$("#form")[0].ret();
turbinereturn true;
}el{
return fal;
}
},
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();
} el {
$('#demo-cls-wz').find('.next').show();
}
}
});
})
最后的效果就是这样⼦的
六一儿童节主持稿
============然后勒，官⽹还提供了⼀个demo，属性、触发事件和⽅法=====
//官⽹给的初始化插件的⽅法
$(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 `fal` if your steps display is hidden. tabClass'nav nav-pills'ul navigation class
nextSelector'.'next element lector
previousSelector'.wizard li.previous'previous element lector
firstSelector'.wizard li.first'first element lector
lastSelector'.wizard li.last'last element lector
backSelector'.wizard li.back'back element lector
finishSelector'.wizard li.finish'finish element lector
Events
Key Description
onInit Fired when plugin is initialized
onShow Fired when plugin data is shown
onNext Fired when next button is clicked (return fal to disable moving to the next step)
onPrevious Fired when previous button is clicked (return fal to disable moving to the previous step)
onFirst Fired when first button is clicked (return fal to disable moving to the first step)
onLast Fired when last button is clicked (return fal to disable moving to the last step)
onBack Fired when back button is clicked (return fal 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 fal to disable moving to that tab and showing its contents)
onTabClick Fired when a tab is clicked (return fal to disable moving to that tab and showing its contents)
onTabShow Fired when a tab content is shown (return fal 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 bad index or tab target id Jumps to the specified tab
currentIndex Returns the zero bad index number for the current tab navigationLength Returns the number of tabs
enable zero bad index Enables a tab, allows a ur to click it (removes .disabled if the item has that class)
disable zero bad index Disables a tab, disallows a ur to click it (adds .disabled to the li element)
display zero bad index Displays the li element if it was previously hidden
hide zero bad index Hides the li element (will not remove it from the DOM)
remove zero bad index, optinal bool remove tab-pane
element or not fal by default
整站翻译
Removes the li element from the DOM if cond argument is
true will also remove the tab-pane element
