前端插件三：基于Bootstrap的jQuery Wizard向导插件

摘要：项目一个基于的用户向导插件，该插件允许使用按钮在步骤间切换，还可以多带带对某个步骤进行特殊的事件处理。默认值下一步元素选择器。默认值完成元素选择器。事件初始化用户向导插件时触发。改变时触发时禁止改变和显示内容。结束用户向导并调用回调函数。

一个基于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...