前端插件三：基於Bootstrap的jQuery Wizard嚮導插件

時間 2019-12-15

標籤前端插件基於 bootstrap jquery wizard 嚮導欄目 Bootstarp 简体版

原文原文鏈接

項目

一個基於Bootstrap的jQuery用戶嚮導插件，該插件容許使用按鈕在步驟間切換，還能夠單獨對某個步驟進行特殊的事件處理。javascript

插件依賴

jQuery 1.3.2+css
Bootstrap 3.xhtml

簡單使用

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'java

ul導航的class。jquery

nextSelector

默認值：'.wizard li.next'bootstrap

「下一步」元素選擇器。ide

previousSelector

默認值：'.wizard li.previous'函數

「上一步」元素選擇器。ui

firstSelector

默認值：'.wizard li.first' spa

「第一步」元素選擇器。

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...