下載地址

點選下載

效果圖

default/預設 (帶有向左、向右移動以及選項選單)

參考Demo: nav-tabs and nav-pills 

classic/摺疊 (摺疊隱藏tab)

作用與優勢

1. 通過簡單的配置，生成可智慧適配ajax和iframe的多標籤頁。
2. 可以直接套用bootstrap的各種模板樣式。
3. 在不關閉視窗的情況下，直接重新整理頁面能保留所有標籤頁。（如果使用了表單，請完成表單後再進行此操作）
4. 導航標籤tab可移動
5. 當標籤數量設定為 1 的時候，隱藏便籤列表

安裝需求

Bootstrap(基本現在html5都需要這個的了)
JQuery
Font Awesone

使用

1.在html的head內引用multitabs的CSS

<link rel="stylesheet" href="plugins/bootstrap-multitabs/css/style.css">

2.在body底部引用multitabs的JS

<script src="plugins/bootstrap-multitabs/js/multitabs.js"></script>

3.並繫結multitabs的區域

<script>
    $('#content_wrapper').multitabs();
</script>
 

4.最後在需要關聯連結中加入"multitabs"的class

<a class="multitabs" href="pages/index-ajax-2.html">ajax INFO Tab 2</a>

** 至此，最簡單的多標籤頁(tabs)配置成功！**

進階配置

###連結可新增引數###

1. [data-type="info"] 指定為content型別為info，共有3種( main | info ), info 為預設配置，可以不用指定。
2. [data-iframe="true"] 指定為iframe模式，當值為false的時候，為智慧模式，自動判斷（內網用ajax，外網用iframe）。預設為false。
3. [data-title="new tab"] 設定後指定標籤頁的標題，預設讀取連結字型。
4. [data-url="index.html"] 如果物件不是<a>連結，此值可以指定連結URL
5. [data-refresh="true"] 強制更新

初始化配置

下面這些為預設配置，可以自行修改

<script>
    $('#content_wrapper').multitabs({
        selector : '.multitabs',                    //觸發multitabs的selector text，注意需要有".","#"等
        iframe : false,                             //iframe模式的總局設定。當值為false的時候，為智慧模式，自動判斷（內網用ajax，外網用iframe）。預設為false。
        class : '',                                 //主框架的class
        refresh: false,                             //全域性強制更新
        init : [                                    //需要在初始載入的tab
            {                                       
                type :'',                           //標籤頁的型別，有 main | info，預設為 info
                title : '',                         //標題（可選），沒有則顯示網址
                content: '',                        //html內容，如果設定此值，下面的URL設定則無效
                url : ''                            //連結
            }, 
            {  /** 更多tab。。**/  },                //依次新增需要的頁面
            {  /** 更多tab。。**/  },                //依次新增需要的頁面
        ],       
        nav : {
            backgroundColor : '#f5f5f5',            //預設nav-bar 背景顏色
            class : '',                             //為nav新增class
            draggable : true,                       //nav tab 可拖動選項
            fixed : false,                          //固定標籤頭列表
            layout : 'default',                     //有兩種模式，'default', 'classic'(所有隱藏tab都在下拉選單裡) 和 'simple'
            maxTabs : 15,                           //最多tab數量。（main和editor不計算在內) 當為1時，整個標籤欄隱藏。main和editor分別只能有1個標籤。
            maxTabTitleLength : 25,                 //tab標題的最大長度
            showCloseOnHover : true,                //當值為true，僅在滑鼠懸浮時顯示關閉按鈕。false時一直顯示
            style : 'nav-tabs',                     //可以為nav-tabs 或 nav-pills
        },
        content : {
            ajax : {
                class : '',                         //為ajax tab-pane 新增class
                error : function (htmlCallBack) {
                    //modify html and return
                    return htmlCallBack;
                },
                success : function (htmlCallBack) {
                    //modify html and return
                    return htmlCallBack;
                }
            },
            iframe : {
                class : ''                          //為iframe tab-pane 新增class
            }
        },
        language : {                                //語言配置
            nav : {
                title : 'Tab',                                  //預設的標籤頁名稱
                dropdown : '<i class="fa fa-bars"></i>',        //標籤欄的下拉選單名稱
                showActivedTab : 'Show Activated Tab',          //下拉選單的顯示啟用頁面
                closeAllTabs : 'Close All Tabs',                //下拉選單的關閉所有頁面
                closeOtherTabs : 'Close Other Tabs',            //下拉選單的關閉其他頁面
            }
        }
    });
</script>

關於 content 的型別

標籤頁 content 的型別，有 main | info 。

1. main頁放產品列表，使用者列表，郵件列表，這些需要id，且js操作容易混亂，故限制只能有1個。當然，你也可以僅僅main頁放網站概況，其他一律用info頁。只是容易衝突。
2. info放產品詳情，使用者詳情，郵件詳情這些少id，以及js操作重複的頁面。

iframe注意事項

1.為了自適應iframe高度，請依照下面這個樣式新增CSS。 其中 .content-wrapper 是當前使用multitabs的wrapper。 .wrapper 為 .content-wrapper 的父層，需要將所有父層都新增 height: 100%

<style type="text/css">
    body,
    body.full-height-layout .wrapper,
    html{
        height: 100%;
    }
    body.full-height-layout .content-wrapper{           /*使用multitabs的wrapper*/
        height: calc(100% - 140px)                      /*減去網頁header和footer的高度，AdminLTE的為140px*/
    }
</style>

2.在iframe內觸發父document的Multitabs方法新建tab: (ifame 頁無須載入jquery)

<script>
    parent.$(parent.document).data('multitabs').create({
        iframe : true,                                //指定為iframe模式，當值為false的時候，為智慧模式，自動判斷（內網用ajax，外網用iframe）。預設為false。
        title : 'open by iframe',                     //標題（可選），沒有則顯示網址
        url : 'pages/index-2.html'                    //連結（必須），如為外鏈，強制為info頁
    }, true);                                         //true 則啟用新增的tab頁
</script>