1. 废话

有一块需求是 有多步表单 点击下一步时触发验证一个范围内的表单，点击上一步或取消，清空表单并返回第一步，点击最后一步提交整个表单的

就找到了这个插件，本来自己写了一个原生的 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 insteadif($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

Events

Methods