基於Bootstrap的標籤頁元件bootstrap-tab

風靈使發表於2018-08-17
boot元件

這裡寫圖片描述

bootstrap-tab元件是對原生的bootstrap-tab元件的封裝，方便開發者更方便地使用，主要包含以下功能：

  • tab頁初始化
  • 關閉tab頁
  • 新增tab
  • 顯示tab頁
  • 獲取tab頁ID

使用

Step1 ：引入樣式

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<!--bootstrap-tab樣式-->
<link rel="stylesheet" href="../css/bootstrap-tab.css">

Step2：引入指令碼

<script src="jquery/jquery-1.8.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="../js/bootstrap-tab.js"></script>

Step3：使用

<div id="tabContainer"></div>

<script>
    $("#tabContainer").tabs({
        data: [{
            id: 'home',
            text: '百度一下',
            url: "tab_first.html",
            closeable: true
        }, {
            id: 'admineap',
            text: 'AdminEAP',
            url: "tab_second.html"
        }, {
            id: 'edit',
            text: '編輯人員',
            url: "tab_content.html",
            closeable: true
        }],
        showIndex: 1,
        loadAll: false
    })

    $("#tabContainer").data("tabs").addTab({id: 'test', text: 'addTab', closeable: true, url: 'tab_content.html'})
</script>

引數和方法說明

引數說明

引數名稱 預設值 可選值 說明
data tab頁資料來源（物件列表），包含id,text,url,closeable屬性
id 必須，單個tab的id
text 必須，單個tab頁的標題
url 必須，單個tab頁的內容url
closeable False true,false 單個tab頁是否可關閉
showIndex 0 預設顯示頁的索引
loadAll True true,false true=一次全部加在頁面,false=只加在showIndex指定的頁面，其他點選時載入，提高響應速度

方法說明

方法名稱 引數 引數說明 方法說明
init tab元件初始化入口方法
builder data tab資料 構建tab頁的主方法
loadData 載入tab頁的內容，根據loadAll即時載入或者點選時載入
addTab obj 單個tab的資料 增加一個tab頁
showTab tabId tab的id 根據id顯示tab頁
getCurrentTabId 獲取當前活動tab頁的ID

bootstrap-tab.js

/**
 * Bootstrap tab元件封裝
 * @created 2017/7/24
 *
 */
(function ($, window, document, undefined) {
    'use strict';

    var pluginName = 'tabs';

    //入口方法
    $.fn[pluginName] = function (options) {
        var self = $(this);
        if (this == null)
            return null;
        var data = this.data(pluginName);
        if (!data) {
            data = new BaseTab(this, options);
            self.data(pluginName, data);
        }
        return data;
    };


    var BaseTab = function (element, options) {
        this.$element = $(element);
        this.options = $.extend(true, {}, this.default, options);
        this.init();
    }

    //預設配置
    BaseTab.prototype.default = {
        showIndex: 0, //預設顯示頁索引
        loadAll: true,//true=一次全部加在頁面,false=只加在showIndex指定的頁面，其他點選時載入，提高響應速度

    }

    //結構模板
    BaseTab.prototype.template = {
        ul_nav: '<ul id="myTab"  class="nav nav-tabs"></ul>',
        ul_li: '<li><a href="#{0}" data-toggle="tab"><span>{1}</span></a></li>',
        ul_li_close: '<i class="fa fa-remove closeable" title="關閉"></i>',
        div_content: '<div  class="tab-content"></div>',
        div_content_panel: '<div class="tab-pane fade" id="{0}"></div>'
    }

    //初始化
    BaseTab.prototype.init = function () {
        if (!this.options.data || this.options.data.length == 0) {
            console.error("請指定tab頁資料");
            return;
        }
        //當前顯示的顯示的頁面是否超出索引
        if (this.options.showIndex < 0 || this.options.showIndex > this.options.data.length - 1) {
            console.error("showIndex超出了範圍");
            //指定為預設值
            this.options.showIndex = this.default.showIndex;
        }
        //清除原來的tab頁
        this.$element.html("");
        this.builder(this.options.data);
    }

    //使用模板搭建頁面結構
    BaseTab.prototype.builder = function (data) {
        var ul_nav = $(this.template.ul_nav);
        var div_content = $(this.template.div_content);

        for (var i = 0; i < data.length; i++) {
            //nav-tab
            var ul_li = $(this.template.ul_li.format(data[i].id, data[i].text));
            //如果可關閉,插入關閉圖示，並繫結關閉事件
            if (data[i].closeable) {
                var ul_li_close = $(this.template.ul_li_close);

                ul_li.find("a").append(ul_li_close);
                ul_li.find("a").append("&nbsp;");
            }

            ul_nav.append(ul_li);

            //div-content
            var div_content_panel = $(this.template.div_content_panel.format(data[i].id));


            div_content.append(div_content_panel);
        }

        this.$element.append(ul_nav);
        this.$element.append(div_content);
        this.loadData();

        this.$element.find(".nav-tabs li:eq(" + this.options.showIndex + ") a").tab("show");

    }

    BaseTab.prototype.loadData = function () {
        var self = this;

        //tab點選即載入事件
        //設定一個值，記錄每個tab頁是否載入過
        this.stateObj = {};
        var data = this.options.data;
        //如果是當前頁或者配置了一次性全部載入，否則點選tab頁時載入
        for (var i = 0; i < data.length; i++) {
            if (this.options.loadAll || this.options.showIndex == i) {
                if (data[i].url) {
                    $("#" + data[i].id).load(data[i].url,data[i].param);
                    this.stateObj[data[i].id] = true;
                } else {
                    console.error("id=" + data[i].id + "的tab頁未指定url");
                    this.stateObj[data[i].id] = false;
                }
            } else {
                this.stateObj[data[i].id] = false;
                (function (id, url,paramter) {
                    self.$element.find(".nav-tabs a[href='#" + id + "']").on('show.bs.tab', function () {
                        if (!self.stateObj[id]) {
                            $("#" + id).load(url,paramter);
                            self.stateObj[id] = true;
                        }
                    });
                }(data[i].id, data[i].url, data[i].paramter))
            }
        }

        //關閉tab事件
        this.$element.find(".nav-tabs li a i.closeable").each(function (index, item) {
            $(item).click(function () {
                var href = $(this).parents("a").attr("href").substring(1);
                if(self.getCurrentTabId()==href){
                    self.$element.find(".nav-tabs li:eq(0) a").tab("show");
                }
                $(this).parents("li").remove();
                $("#" + href).remove();
            })
        });

    }

    //新增一個tab頁
    BaseTab.prototype.addTab=function (obj) {
        var self=this;
        //nav-tab
        var ul_li = $(this.template.ul_li.format(obj.id, obj.text));
        //如果可關閉,插入關閉圖示，並繫結關閉事件
        if (obj.closeable) {
            var ul_li_close = $(this.template.ul_li_close);

            ul_li.find("a").append(ul_li_close);
            ul_li.find("a").append("&nbsp;");
        }

        this.$element.find(".nav-tabs:eq(0)").append(ul_li);
        //div-content
        var div_content_panel = $(this.template.div_content_panel.format(obj.id));
        this.$element.find(".tab-content:eq(0)").append(div_content_panel);
        $("#" + obj.id).load(obj.url,obj.paramter);
        this.stateObj[obj.id] = true;

        if(obj.closeable){
            this.$element.find(".nav-tabs li a[href='#" + obj.id + "'] i.closeable").click(function () {
                var href = $(this).parents("a").attr("href").substring(1);
                if(self.getCurrentTabId()==href){
                    self.$element.find(".nav-tabs li:eq(0) a").tab("show");
                }
                $(this).parents("li").remove();
                $("#" + href).remove();

            })
        }

        this.$element.find(".nav-tabs a[href='#" + obj.id + "']").tab("show");
    }

    //根據id獲取活動也標籤名
    BaseTab.prototype.find=function (tabId) {
        return this.$element.find(".nav-tabs li a[href='#" + tabId + "']").text();
    }

    // 刪除活動頁
    BaseTab.prototype.remove=function (tabId) {
        var self=this;
        $("#" + tabId).remove();
        this.$element.find(".nav-tabs li a[href='#" + tabId + "']").parents("li").remove();
    }

    // 重新載入頁面
    BaseTab.prototype.reload=function (obj) {
        var self=this;
        if(self.find(obj.id)!=null){
            $("#" + obj.id).remove();
            this.$element.find(".nav-tabs li a[href='#" + obj.id + "']").parents("li").remove();
            self.addTab(obj);
        }else{
            self.addTab(obj);
        }
    }

    //根據id設定活動tab頁
    BaseTab.prototype.showTab=function (tabId) {
        this.$element.find(".nav-tabs li a[href='#" + tabId + "']").tab("show");
    }

    //獲取當前活動tab頁的ID
    BaseTab.prototype.getCurrentTabId=function () {
        var href=this.$element.find(".nav-tabs li.active a").attr("href");
        href=href.substring(1);
        return href;
    }


    String.prototype.format = function () {
        if (arguments.length == 0) return this;
        for (var s = this, i = 0; i < arguments.length; i++)
            s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
        return s;
    };
})(jQuery, window, document)

相關文章