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

最新推荐文章于 2024-04-23 10:04:21 发布

weixin_34248023

最新推荐文章于 2024-04-23 10:04:21 发布

阅读量851

点赞数

文章标签：前端 javascript ViewUI

原文链接：https://segmentfault.com/a/1190000007646591

版权

项目

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

weixin_34248023

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端插件三：基于Bootstrap的jQuery Wizard向导插件

项目一个基于Bootstrap的jQuery用户向导插件，该插件允许使用按钮在步骤间切换，还可以单独对某个步骤进行特殊的事件处理。插件依赖jQuery 1.3.2+Bootstrap 3.x简单使用HTML<html> <head> <link rel='styles...
复制链接

扫一扫

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

项目

插件依赖

简单使用

HTML

JavaScript

选项

tabClass

nextSelector

previousSelector

firstSelector

lastSelector

backSelector

finishSelector

事件

onInit

onShow

onNext

onPrevious

onFirst

onLast

onBack

onFinish

onTabChange

onTabClick

onTabShow

方法

next()

previous()

first()

last()

finish()

show(index/id)

currentIndex()

navigationLength()

enable(index)

disable(index)

display(index)

hide(index)

remove(index,optinalBool)

完整案例

HTML

JavaScript

“相关推荐”对你有帮助么？