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

2024年2月17日 156次阅读 来源: FayneVALSK

项目

一个基于Bootstrap的jQuery用户向导插件，该插件允许使用按钮在步骤间切换，还可以单独对某个步骤进行特殊的事件处理。

插件依赖

  • jQuery 1.3.2+

  • Bootstrap 3.x

简单使用

HTML

<html>
    <head>
        <link rel='stylesheet' href='styles/bootstrap.css'>
        <link rel='stylesheet' href='styles/libs/wizard/wizard.css'>
    </head>
    <body>
        <div id='rootwizard' class='form-wizard form-wizard-horizontal'>
            <form class='form floating-label'>
                <div class='form-wizard-nav'>
                    <div class='progress'><div class='progress-bar progress-bar-primary'></div></div>
                    <ul class='nav nav-justified'>
                        <li class='active'>
                            <a href='#step1' data-toggle='tab'>
                                <span class='step'>1</span> 
                                <span class='title'>第一步</span>
                            </a>
                        </li>
                        <li>
                            <a href='#step2' data-toggle='tab'>
                                <span class='step'>2</span> 
                                <span class='title'>第二步</span>
                            </a>
                        </li>
                        <li>
                            <a href='#step3' data-toggle='tab'>
                                <span class='step'>3</span> 
                                <span class='title'>第三步</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class='tab-content clearfix'>
                    <div class='tab-pane active' id='step1'>
                        <br/><br/>
                        <div class='form-group'>
                            <input type='text' name='first' id='first' class='form-control' required>
                            <label for='first' class='control-label'>第一步</label>
                        </div>
                    </div>
                    <div class='tab-pane' id='step2'>
                        <br/><br/>
                        <div class='form-group'>
                            <input type='text' name='second' id='second' class='form-control' required>
                            <label for='second' class='control-label'>第二步</label>
                        </div>
                    </div>
                    <div class='tab-pane' id='step3'>
                        <br/><br/>
                        <div class='form-group'>
                            <input type='text' name='third' id='third' class='form-control' required>
                            <label for='third' class='control-label'>第三步</label>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <script src='scripts/libs/jquery/jquery-1.11.2.min.js'></script>
        <script src='scripts/libs/jquery/bootstrap.min.js'></script>
        <script src='scripts/libs/jquery/jquery.bootstrap.wizard.min.js'></script>
    </body>
</html>

JavaScript

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

选项

tabClass

默认值：’nav nav-pills’

ul导航的class。

nextSelector

默认值：’.wizard li.next’

“下一步”元素选择器。

previousSelector

默认值：’.wizard li.previous’

“上一步”元素选择器。

firstSelector

默认值：’.wizard li.first’

“第一步”元素选择器。

lastSelector

默认值：’.wizard li.last’

“最后一步”元素选择器。

backSelector

默认值：’.wizard li.back’

“返回”元素选择器。

finishSelector

默认值：’.wizard li.finish’

“完成”元素选择器。

事件

onInit

初始化用户向导插件时触发。

onShow

显示用户向导插件时触发。

onNext

“下一步”按钮点击时触发(return false时禁止点击)。

onPrevious

“上一步”按钮点击时触发(return false时禁止点击)。

onFirst

“第一步”按钮被点击时触发(return false时禁止点击)。

onLast

“最后一步”按钮被点击时触发(return false时禁止点击)。

onBack

“返回”按钮被点击时触发(return false禁止在导航历史中后退)

onFinish

“完成”按钮被点击时触发(返回不相关的值)。

onTabChange

Tab改变时触发(return false时禁止改变和显示内容)。

onTabClick

Tab点击时触发(return false时禁止改变和显示内容)。

onTabShow

Tab内容显示时触发(return false时禁止该内容显示)。

方法

next()

移动到下一个Tab。

previous()

移动到上一个Tab。

first()

跳转到第一个Tab。

last()

跳转到最后一个Tab。

finish()

结束用户向导并调用onFinish回调函数。

show(index/id)

跳转到指定的tab（index从0开始）。

currentIndex()

获取当前tab索引（从0开始的数字）。

navigationLength()

返回tabs的数量。

enable(index)

允许用户点击某个tab（如果li中含有 .disabled class则删除）。

disable(index)

禁止用户点击某个tab（在li元素上添加 .disabled class）。

display(index)

如果前一个li元素是隐藏的则显示它。

hide(index)

隐藏li元素（不会从DOM中删除）。

remove(index,optinalBool)

optinalBool：可选布尔值，默认为false。

删除li元素（从DOM中删除，如果optinalBool为true则同时删除tab-pane元素）。

完整案例

<html>
    <head>
        <link rel='stylesheet' href='styles/bootstrap.css'>
        <link rel='stylesheet' href='styles/libs/wizard/wizard.css'>
    </head>
    <body>
        <div id='rootwizard' class='form-wizard form-wizard-horizontal'>
            <form class='form floating-label form-validation' role='form' novalidate='novalidate'>
                <div class='form-wizard-nav'>
                    <div class='progress'><div class='progress-bar progress-bar-primary'></div></div>
                    <ul class='nav nav-justified'>
                        <li class='active'>
                            <a href='#step1' data-toggle='tab'>
                                <span class='step'>1</span> 
                                <span class='title'>第一步：选择类型</span>
                            </a>
                        </li>
                        <li>
                            <a href='#step2' data-toggle='tab'>
                                <span class='step'>2</span> 
                                <span class='title'>第二步：填写参数</span>
                            </a>
                        </li>
                        <li>
                            <a href='#step3' data-toggle='tab'>
                                <span class='step'>3</span> 
                                <span class='title'>第三步：创建成功</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class='tab-content clearfix'>
                    <div class='tab-pane active' id='step1'>
                        <br/><br/>
                        <div class='col-sm-10 col-sm-offset-1'>
                            <div class='form-group'>
                                <select name='type' id='type' class='form-control' required>
                                    <option></option>
                                    <option value='1'>类型一</option>
                                    <option value='2'>类型二</option>
                                    <option value='3'>类型三</option>
                                    <option value='4'>类型四</option>
                                </select>
                                <label for='type' class='control-label'>请选择类型</label>
                            </div>
                        </div>    
                    </div>
                    <div class='tab-pane' id='step2'>
                        <br/><br/>
                        <div class='col-sm-10 col-sm-offset-1'>
                            <div class='form-group'>
                                <input type='text' name='name' id='name' class='form-control' required>
                                <label for='name' class='control-label'>姓名</label>
                            </div>
                            <div class='form-group'>
                                <input type='email' name='email' id='email' class='form-control' data-rule-email='true' required>
                                <label for='email' class='control-label'>邮箱</label>
                            </div>
                        </div>    
                    </div>
                    <div class='tab-pane' id='step3'>
                        <br/><br/>
                        <h3 class='text-center'>创建成功！</h3>
                    </div>
                </div>
                <div class='col-sm-10 col-sm-offset-1 no-padding'>
                    <ul class='pager wizard'>
                        <li class='previous first'><a class='btn btn-default' href='javascript:void(0);'>First</a></li>
                        <li class='previous'><a class='btn btn-default' href='javascript:void(0);'>Previous</a></li>
                        <li class='next last'><a class='btn btn-default' href='javascript:void(0);'>Last</a></li>
                        <li class='next'><a class='btn btn-default' href='javascript:void(0);'>Next</a></li>
                    </ul>
                </div>    
            </form>
        </div>

        <script src='scripts/libs/jquery/jquery-1.11.2.min.js'></script>
        <script src='scripts/libs/jquery/bootstrap.min.js'></script>
        <script src='scripts/libs/jquery/jquery.bootstrap.wizard.min.js'></script>
    </body>
</html>

HTML

JavaScript

// 处理选项卡显示（显示进度条）
_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…

    原文作者：FayneVALSK
    原文地址: https://segmentfault.com/a/1190000007646591
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞