基於Bootstrap的jQuery使用者嚮導外掛

這是一款非常實用的基於Twitter Bootstrap的jquery使用者嚮導外掛。該Bootstrap使用者嚮導外掛允許你使用按鈕來在各個不同的操作步驟之間來回切換，還可以單獨對某個步驟進行特殊的事件處理。

線上演示 下載

外掛依賴

• Requires jQuery v1.3.2 or later
• Bootstrap 3.x

示例程式碼

//basic wizard

$(document).ready(function() {

$('#rootwizard').bootstrapWizard();

});

//wizard with options and events

$(document).ready(function() {

$('#rootwizard').bootstrapWizard({

tabClass: 'nav nav-pills',

onNext: function(tab, navigation, index) {

alert('next');

}

});

});

//calling a method

$('#rootwizard').bootstrapWizard('show',3);

配置引數

選項	預設值	描述
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

事件

名稱	描述
onInit	使用者嚮導外掛初始化時觸發
onShow	使用者嚮導外掛資料顯示時觸發
onNext	next 按鈕被點選時觸發(return false to disable moving to the next step)
onPrevious	previous 按鈕被點選時觸發(return false to disable moving to the previous step)
onFirst	first 按鈕被點選時觸發(return false to disable moving to the first step)
onLast	last 按鈕被點選時觸發(return false to disable moving to the last step)
onBack	back 按鈕被點選時觸發(return false to disable moving backwards in navigation history)
onFinish	finish 按鈕被點選時觸發(return value is irrelevant)
onTabChange	在Tab改變時觸發(return false to disable moving to that tab and showing its contents)
onTabClick	在Tab被點選時觸發(return false to disable moving to that tab and showing its contents)
onTabShow	在Tab內容顯示時觸發(return false to disable showing that tab content)

方法

名稱	引數	描述
next		移動到下一個tab
previous		移動到前一個tab
first		跳轉到第一個tab
last		跳轉到最後一個tab
finish		結束使用者嚮導並呼叫onFinish回撥函式
show	基於0的index或目標id	跳轉到指定的tab
currentIndex		Returns the zero based index number for the current tab
navigationLength		返回tabs的數量
enable	zero based index	允許使用者點選某個tab(removes .disabled if the item has that class)
disable	zero based index	禁止使用者點選某個tab(adds .disabled to the li element)
display	zero based index	如果前一個li元素是隱藏的則顯示它
hide	zero based index	隱藏li元素(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