摘要：項(xiàng)目一個(gè)基于的用戶向?qū)Р寮摬寮试S使用按鈕在步驟間切換，還可以多帶帶對(duì)某個(gè)步驟進(jìn)行特殊的事件處理。默認(rèn)值下一步元素選擇器。默認(rèn)值完成元素選擇器。事件初始化用戶向?qū)Р寮r(shí)觸發(fā)。改變時(shí)觸發(fā)時(shí)禁止改變和顯示內(nèi)容。結(jié)束用戶向?qū)Р⒄{(diào)用回調(diào)函數(shù)。

一個(gè)基于Bootstrap的jQuery用戶向?qū)Р寮?，該插件允許使用按鈕在步驟間切換，還可以多帶帶對(duì)某個(gè)步驟進(jìn)行特殊的事件處理。

jQuery 1.3.2+

Bootstrap 3.x

    
        
        
    
    
        

            

                

                    

                    

                        

                            
                                1 
                                第一步
                            
                        
                        

                            
                                2 
                                第二步
                            
                        
                        

                            
                                3 
                                第三步
                            
                        
                    
                
                

                    

                        


                        

                            
                            第一步
                        
                    
                    

                        


                        

                            
                            第二步
                        
                    
                    

                        


                        

                            
                            第三步
                        
                    
                
            
        

        
        
        
    

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

默認(rèn)值："nav nav-pills"

ul導(dǎo)航的class。

默認(rèn)值：".wizard li.next"

“下一步”元素選擇器。

默認(rèn)值：".wizard li.previous"

“上一步”元素選擇器。

默認(rèn)值：".wizard li.first"

“第一步”元素選擇器。

默認(rèn)值：".wizard li.last"

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

默認(rèn)值：".wizard li.back"

“返回”元素選擇器。

默認(rèn)值：".wizard li.finish"

“完成”元素選擇器。

初始化用戶向?qū)Р寮r(shí)觸發(fā)。

顯示用戶向?qū)Р寮r(shí)觸發(fā)。

“下一步”按鈕點(diǎn)擊時(shí)觸發(fā)(return false時(shí)禁止點(diǎn)擊)。

“上一步”按鈕點(diǎn)擊時(shí)觸發(fā)(return false時(shí)禁止點(diǎn)擊)。

“第一步”按鈕被點(diǎn)擊時(shí)觸發(fā)(return false時(shí)禁止點(diǎn)擊)。

“最后一步”按鈕被點(diǎn)擊時(shí)觸發(fā)(return false時(shí)禁止點(diǎn)擊)。

“返回”按鈕被點(diǎn)擊時(shí)觸發(fā)(return false禁止在導(dǎo)航歷史中后退)

“完成”按鈕被點(diǎn)擊時(shí)觸發(fā)(返回不相關(guān)的值)。

Tab改變時(shí)觸發(fā)(return false時(shí)禁止改變和顯示內(nèi)容)。

Tab點(diǎn)擊時(shí)觸發(fā)(return false時(shí)禁止改變和顯示內(nèi)容)。

Tab內(nèi)容顯示時(shí)觸發(fā)(return false時(shí)禁止該內(nèi)容顯示)。

移動(dòng)到下一個(gè)Tab。

移動(dòng)到上一個(gè)Tab。

跳轉(zhuǎn)到第一個(gè)Tab。

跳轉(zhuǎn)到最后一個(gè)Tab。

結(jié)束用戶向?qū)Р⒄{(diào)用onFinish回調(diào)函數(shù)。

跳轉(zhuǎn)到指定的tab（index從0開始）。

獲取當(dāng)前tab索引（從0開始的數(shù)字）。

返回tabs的數(shù)量。

允許用戶點(diǎn)擊某個(gè)tab（如果li中含有 .disabled class則刪除）。

禁止用戶點(diǎn)擊某個(gè)tab（在li元素上添加 .disabled class）。

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

隱藏li元素（不會(huì)從DOM中刪除）。

optinalBool：可選布爾值，默認(rèn)為false。

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

    
        
        
    
    
        

            

                

                    

                    

                        

                            
                                1 
                                第一步：選擇類型
                            
                        
                        

                            
                                2 
                                第二步：填寫參數(shù)
                            
                        
                        

                            
                                3 
                                第三步：創(chuàng)建成功
                            
                        
                    
                
                

                    

                        


                        

                            

                                
                                    
                                    類型一
                                    類型二
                                    類型三
                                    類型四
                                
                                請(qǐng)選擇類型
                            
                        
    
                    
                    

                        


                        

                            

                                
                                姓名
                            
                            

                                
                                郵箱
                            
                        
    
                    
                    

                        


                        
創(chuàng)建成功！
                    
                
                

                    

                        
First
                        
Previous
                        
Last
                        
Next
                    
                
    
            
        

        
        
        
    

// 處理選項(xiàng)卡顯示（顯示進(jìn)度條）
_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});
};
// 初始化向?qū)Р寮?$("#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...