摘要：項目一個基于的用戶向導插件，該插件允許使用按鈕在步驟間切換，還可以多帶帶對某個步驟進行特殊的事件處理。默認值下一步元素選擇器。默認值完成元素選擇器。事件初始化用戶向導插件時觸發。改變時觸發時禁止改變和顯示內容。結束用戶向導并調用回調函數。

一個基于Bootstrap的jQuery用戶向導插件，該插件允許使用按鈕在步驟間切換，還可以多帶帶對某個步驟進行特殊的事件處理。

jQuery 1.3.2+

Bootstrap 3.x

    
        
        
    
    
        

            

                

                    

                    

                        

                            
                                1 
                                第一步
                            
                        
                        

                            
                                2 
                                第二步
                            
                        
                        

                            
                                3 
                                第三步
                            
                        
                    
                
                

                    

                        


                        

                            
                            第一步
                        
                    
                    

                        


                        

                            
                            第二步
                        
                    
                    

                        


                        

                            
                            第三步
                        
                    
                
            
        

        
        
        
    

$(document).ready(function() {
    $("#rootwizard").bootstrapWizard();
});

默認值："nav nav-pills"

ul導航的class。

默認值：".wizard li.next"

“下一步”元素選擇器。

默認值：".wizard li.previous"

“上一步”元素選擇器。

默認值：".wizard li.first"

“第一步”元素選擇器。

默認值：".wizard li.last"

“最后一步”元素選擇器。

默認值：".wizard li.back"

“返回”元素選擇器。

默認值：".wizard li.finish"

“完成”元素選擇器。

初始化用戶向導插件時觸發。

顯示用戶向導插件時觸發。

“下一步”按鈕點擊時觸發(return false時禁止點擊)。

“上一步”按鈕點擊時觸發(return false時禁止點擊)。

“第一步”按鈕被點擊時觸發(return false時禁止點擊)。

“最后一步”按鈕被點擊時觸發(return false時禁止點擊)。

“返回”按鈕被點擊時觸發(return false禁止在導航歷史中后退)

“完成”按鈕被點擊時觸發(返回不相關的值)。

Tab改變時觸發(return false時禁止改變和顯示內容)。

Tab點擊時觸發(return false時禁止改變和顯示內容)。

Tab內容顯示時觸發(return false時禁止該內容顯示)。

移動到下一個Tab。

移動到上一個Tab。

跳轉到第一個Tab。

跳轉到最后一個Tab。

結束用戶向導并調用onFinish回調函數。

跳轉到指定的tab（index從0開始）。

獲取當前tab索引（從0開始的數字）。

返回tabs的數量。

允許用戶點擊某個tab（如果li中含有 .disabled class則刪除）。

禁止用戶點擊某個tab（在li元素上添加 .disabled class）。

如果前一個li元素是隱藏的則顯示它。

隱藏li元素（不會從DOM中刪除）。

optinalBool：可選布爾值，默認為false。

刪除li元素（從DOM中刪除，如果optinalBool為true則同時刪除tab-pane元素）。

    
        
        
    
    
        

            

                

                    

                    

                        

                            
                                1 
                                第一步：選擇類型
                            
                        
                        

                            
                                2 
                                第二步：填寫參數
                            
                        
                        

                            
                                3 
                                第三步：創建成功
                            
                        
                    
                
                

                    

                        


                        

                            

                                
                                    
                                    類型一
                                    類型二
                                    類型三
                                    類型四
                                
                                請選擇類型
                            
                        
    
                    
                    

                        


                        

                            

                                
                                姓名
                            
                            

                                
                                郵箱
                            
                        
    
                    
                    

                        


                        
創建成功！
                    
                
                

                    

                        
First
                        
Previous
                        
Last
                        
Next
                    
                
    
            
        

        
        
        
    

// 處理選項卡顯示（顯示進度條）
_handleTabShow(tab, navigation, index, wizard) {
    var total = navigation.find("li").length;
    var current = index + 0;
    var percent = (current / (total - 1)) * 100;
    var percentWidth = 100 - (100 / total) + "%";

    navigation.find("li").removeClass("done");
    navigation.find("li.active").prevAll().addClass("done");

    wizard.find(".progress-bar").css({width: percent + "%"});
    $(".form-wizard-horizontal").find(".progress").css({"width": percentWidth});
};
// 初始化向導插件
$("#rootwizard").bootstrapWizard({
    onTabShow: function(tab, navigation, index) {
        _handleTabShow(tab, navigation, index, $("#rootwizard"));
    },
    onNext: function(tab, navigation, index) {
        var form = $("#rootwizard").find(".form-validation");
        var valid = form.valid();
        if(!valid) {
            form.data("validator").focusInvalid();
            return false;
        }
    }
});

參考文檔：
http://vadimg.com/twitter-boo...
http://www.htmleaf.com/jQuery...