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

2019年8月31日 164次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞