- 廢話
有一塊需求是 有多步表單 點擊下一步時觸發驗證一個範圍內的表單，點擊上一步或取消，清空表單並返回第一步，點擊最後一步提交整個表單的
就找到了這個插件，本來自己寫了一個原生的 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 |