zTab layui多標簽頁組件

zTab

zTab是一個layui多標簽頁插件，仿照了layuiAdmin的iframe版Tab實現

當前版本v1.0

碼雲地址：https://gitee.com/sushengbuyu/zTab

在線預覽：http://47.96.138.120/manage/

使用說明：

1、復制static/layui/mymodules下的zTab文件夾到你的layui第三方模塊的目錄中

2、在layui.js中加入如下代碼

layui.config({
    base: '/static/layui/mymodules/' //假設這是你存放拓展模塊的根目錄
}).extend({ //設定模塊別名
    tab: 'zTab/zTab'
});

 

3、html代碼如下

<div class="layui-side layui-side-menu">
    <div class="layui-side-scroll">
        <div class="layui-logo">zTab</div>
        <!-- 左側導航區域（可配合layui已有的垂直導航） -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <li v-for="menu in menus" class="layui-nav-item layui-nav-itemed">
                <a class="" href="javascript:void(0);" v-text="menu.name"></a>
                <dl v-if="menu.type === 0" v-for="child in menu.childs" class="layui-nav-child">
                    <dd>
                        <a :lay-href="child.url" v-text="child.name" href="javascript:;"></a>
                    </dd>
                </dl>
            </li>
        </ul>
    </div>
</div>
<div id="tabs"></div>
<div id="tabs-body" class="layui-body">

 

4、js代碼如下

layui.use('tab', function () {
    var tab = layui.tab;
    tab.init('#tabs', {
        index: {
            url: 'content_index.html'
        }
    });
    for(var i=0;i<50;i++){
        tab.addTab({
            id: i,
            title: 'Tab'+i,
            type: 'html',
            content: '<h1>aa'+ i +'</h1>',
            url: '/manage/user'+ i +'.html'
        });
    }
    // console.log("Tab初始化完成");
});

 

說明：

如Tab組所在的元素設置ID為tabs
則Tab內容所在的元素ID必須為tabs-body

組件會自動監聽頁面中帶有lay-href屬性的a標簽的點擊事件，自動創建新的Tab
id自動設為lay-href的值，類型為iframe

zTab函數說明：

init(select, option): 初始化函數
    參數說明：
    select: "#tabs"    //Tab組所在的元素    使用jquery選擇器語法
    option: {     //初始化參數
        index: {        //首頁初始化參數
            id: "index",    //默認值為"index",不可修改
            close: false, //是否可關閉
            type: 'iframe', //默認為iframe['text','html','iframe']
            title: '', //標題
            content: '', //內容 type為text、html時必填
            url: '', //url type為iframe時必填
            icon: 'layui-icon-home' //圖標 目前僅支持layui圖標
        }
    }
    
addTab(tab):    新增Tab頁
    參數說明：
    tab: {
        id: "",    //唯一主鍵，不可為空
        close: true, //是否可關閉,默認為true
        type: 'iframe', //默認為iframe,['text','html','iframe']
        title: '', //標題
        content: '', //內容 type為text、html時必填
        url: '', //url type為iframe時必填
        icon: '' //圖標 目前僅支持layui圖標
    }
    
close(id):    關閉指定Tab
    參數說明：
    id: "tab1" //Tab id
    
closeAll():    關閉所有Tab(close為false的不會關閉)
    無參數

closeOthers(id):    關閉其他Tab(close為false的不會關閉)
    參數說明：
    id: "tab1" //Tab id