在线无码一区二区三区不卡4405,成人精品国产亚洲欧洲

文檔

功能支持

支持頁(yè)面多個(gè)Tab選項(xiàng)卡彈出菜單單獨(dú)定義
支持自定義彈出項(xiàng)和彈出事件（使用registMethod屬性進(jìn)行注冊(cè)）
支持自定義圖標(biāo)（目前僅支持LayUI默認(rèn)圖標(biāo)）

效果圖

調(diào)用說(shuō)明

一個(gè)頁(yè)面一個(gè)Tab選項(xiàng)卡情況

html部分
Tab選項(xiàng)卡使用官方提供模板： https://www.layui.com/doc/element/tab.html 然后簡(jiǎn)單修改如下：

<div id="nav1">
    <!-- 頂部切換卡 -->
    <!--ul的id要和lay-filter一致-->
    <div class="layui-tab" lay-filter="main_tab1">
        <ul id="main_tab1" class="layui-tab-title">
            <li lay-id="0" class="layui-this">網(wǎng)站設(shè)置</li>
            <li lay-id="1">用戶(hù)管理</li>
            <li lay-id="2">權(quán)限分配</li>
            <li lay-id="3">商品管理</li>
            <li lay-id="4">訂單管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">這是 網(wǎng)站設(shè)置 內(nèi)容</div>
            <div class="layui-tab-item">這是 用戶(hù)管理 內(nèi)容</div>
            <div class="layui-tab-item">這是 權(quán)限分配 內(nèi)容</div>
            <div class="layui-tab-item">這是 商品管理 內(nèi)容</div>
            <div class="layui-tab-item">這是 訂單管理 內(nèi)容</div>
        </div>
    </div>
</div>

注意：

> 需要在class="layui-tab"的div外層包裹一層div并指定該div的id，該id也是組件“container”的屬性值
ul的“id”要和父div的“l(fā)ay-filter”一致
> ”lay-filter“屬性即組件的”filter“屬性
> 為各個(gè)選項(xiàng)卡菜單項(xiàng)（li元素）加入“l(fā)ay-id”屬性進(jìn)行唯一標(biāo)識(shí)。
> 其它內(nèi)容自行處理即可！

JavaScript部分

默認(rèn)渲染

layui.config({
    base: 'module/',
}).use(['element', 'tabrightmenu'], function () {
    let element = layui.element;
    let rightmenu_ = layui.tabrightmenu;

    // 默認(rèn)方式渲染全部：關(guān)閉當(dāng)前（closethis）、關(guān)閉所有（closeall）、關(guān)閉其它（closeothers）、關(guān)閉左側(cè)所有（closeleft）、關(guān)閉右側(cè)所有（closeright）、刷新當(dāng)前頁(yè)（refresh）
    rightmenu_.render({
        container: '#nav1',
        filter: 'main_tab1',
    });
});

自定義渲染項(xiàng)

layui.config({
    base: 'module/',
}).use(['element', 'tabrightmenu'], function () {
    let element = layui.element;
    let rightmenu_ = layui. tabrightmenu;

    // 默認(rèn)方式渲染全部：關(guān)閉當(dāng)前（closethis）、關(guān)閉所有（closeall）、關(guān)閉其它（closeothers）、關(guān)閉左側(cè)所有（closeleft）、關(guān)閉右側(cè)所有（closeright）、刷新當(dāng)前頁(yè)（refresh）
    rightmenu_.render({
        container: '#nav1',
        filter: 'main_tab1',
        navArr: [
            {eventName: 'closethis', title: '關(guān)閉當(dāng)前', icon: 'layui-icon-close'},
            {eventName: 'closeall', title: '關(guān)閉所有'},
            {eventName: 'closeothers', title: '關(guān)閉其它'},
            //自定義菜單項(xiàng)，此時(shí)dataType屬性表示自定義事件
            {title: "測(cè)試", eventName: 'test'},
            {title: "測(cè)試2", eventName: 'test2'},
        ],
        //注冊(cè)自定義事件
        registMethod: {'test': testMethod, 'test2': test2Method}
    });
    
    
    
    function testMethod(id, title, currentNavGroup, dom) {
            changeCurrentTabContent(currentNavGroup, "[測(cè)試]觸發(fā),觸發(fā)的ID：" + id + "，標(biāo)題：" + title);
        }

    function test2Method(id, title, currentNavGroup, dom) {
            changeCurrentTabContent(currentNavGroup, "[測(cè)試2]觸發(fā),觸發(fā)的ID：" + id + "，標(biāo)題：" + title);
        }

    function changeCurrentTabContent(currentNavGroup, content) {
            $(currentNavGroup + " div[class='layui-tab-item layui-show']").html(content);

        }
});

使用自定義彈出項(xiàng)最重要的就是navArr屬性。該屬性是一個(gè)對(duì)象集合，每一個(gè)對(duì)象描述了菜單項(xiàng)的一些基本信息（eventName：事件類(lèi)型、title：菜單項(xiàng)標(biāo)題、icon：圖標(biāo)class類(lèi)名）

使用自定義彈出項(xiàng)需要定義registMethod屬性，以便對(duì)eventName屬性指定的事件進(jìn)行注冊(cè)
一個(gè)頁(yè)面一個(gè)Tab選項(xiàng)卡情況

該情景與上述定義、調(diào)用差不多，唯一需要注意的就是HTML部分。

<h1>選項(xiàng)卡1</h1>
<div id="nav1">
    <!-- 頂部切換卡 -->
    <!--ul的id要和lay-filter一致-->
    <div class="layui-tab" lay-filter="main_tab1">
        <ul id="main_tab1" class="layui-tab-title">
            <li lay-id="0" class="layui-this">網(wǎng)站設(shè)置</li>
            <li lay-id="1">用戶(hù)管理</li>
            <li lay-id="2">權(quán)限分配</li>
            <li lay-id="3">商品管理</li>
            <li lay-id="4">訂單管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">這是 網(wǎng)站設(shè)置 內(nèi)容</div>
            <div class="layui-tab-item">這是 用戶(hù)管理 內(nèi)容</div>
            <div class="layui-tab-item">這是 權(quán)限分配 內(nèi)容</div>
            <div class="layui-tab-item">這是 商品管理 內(nèi)容</div>
            <div class="layui-tab-item">這是 訂單管理 內(nèi)容</div>
        </div>
    </div>
</div>

<h1>選項(xiàng)卡2</h1>
<div id="nav2">
    <!-- 頂部切換卡 -->
    <div class="layui-tab" lay-filter="main_tab2">
        <ul id="main_tab2" class="layui-tab-title">
            <li lay-id="11" class="layui-this">權(quán)限管理</li>
            <li lay-id="12">機(jī)構(gòu)管理</li>
            <li lay-id="21">字典管理</li>
            <li lay-id="31">用戶(hù)管理</li>
            <li lay-id="41">物流管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">這是 權(quán)限管理 內(nèi)容</div>
            <div class="layui-tab-item">這是 機(jī)構(gòu)管理 內(nèi)容</div>
            <div class="layui-tab-item">這是 字典管理 內(nèi)容</div>
            <div class="layui-tab-item">這是 用戶(hù)管理 內(nèi)容</div>
            <div class="layui-tab-item">這是 物流管理 內(nèi)容</div>
        </div>
    </div>
</div>

注意，我們定義了兩個(gè)div，id分別為”nav1“、”nav2“。假如我們現(xiàn)在實(shí)現(xiàn)id為”nav1“的Tab選項(xiàng)卡彈出默認(rèn)菜單項(xiàng)，id為”nav2“的Tab選項(xiàng)卡彈出一些自定義菜單項(xiàng)，JavaScript代碼如下：

layui.config({
    base: 'module/',
}).use(['tabrightmenu'], function () {
    let element = layui.element;
    let rightmenu_ = layui.tabrightmenu;

    // 默認(rèn)方式渲染全部：關(guān)閉當(dāng)前（closethis）、關(guān)閉所有（closeall）、關(guān)閉其它（closeothers）、關(guān)閉左側(cè)所有（closeleft）、關(guān)閉右側(cè)所有（closeright）、刷新當(dāng)前頁(yè)（refresh）
    // 渲染nav1
    rightmenu_.render({
        container: '#nav1',
        filter: 'main_tab1',
    });

    // 渲染nav2，渲染默認(rèn)部分彈出項(xiàng)+自定義彈出項(xiàng)
    rightmenu_.render({
        container: '#nav2',
        filter: 'main_tab2',
        // navArr：對(duì)象數(shù)組，每個(gè)對(duì)象包含dataType、title、method屬性
        navArr: [
            {eventName: 'closethis', title: '關(guān)閉當(dāng)前', icon: 'layui-icon-close'},
            {eventName: 'closeall', title: '關(guān)閉所有'},
            {eventName: 'closeothers', title: '關(guān)閉其它'},
            //自定義菜單項(xiàng)，此時(shí)dataType屬性表示自定義事件
            {title: "測(cè)試", eventName: 'test'},
            {title: "測(cè)試2", eventName: 'test2'},
        ],
        // 注冊(cè)自定義事件
        registMethod: {'test': testMethod, 'test2': test2Method}
    })

    function testMethod(id, title, currentNavGroup, dom) {
        changeCurrentTabContent(currentNavGroup, "[測(cè)試]觸發(fā),觸發(fā)的ID：" + id + "，標(biāo)題：" + title);
    }

    function test2Method(id, title, currentNavGroup, dom) {
        changeCurrentTabContent(currentNavGroup, "[測(cè)試2]觸發(fā),觸發(fā)的ID：" + id + "，標(biāo)題：" + title);
    }

    function changeCurrentTabContent(currentNavGroup, content) {
        $(currentNavGroup + " div[class='layui-tab-item layui-show']").html(content);

    }
});

以上就可以實(shí)現(xiàn)一個(gè)頁(yè)面多個(gè)選項(xiàng)卡進(jìn)行不同處理，實(shí)用性更強(qiáng)。

具體使用說(shuō)明參考 https://github.com/TangHanF/layui_plugin/blob/master/README.md 說(shuō)明

下載

立即下載去 GitHub 下載

該擴(kuò)展組件由第三方用戶(hù)主動(dòng)投遞，并由其自身進(jìn)行維護(hù)，本站僅做收集。

layui 第三方組件平臺(tái)

Tab選項(xiàng)卡右鍵彈出菜單組件 tabrightmenu

文檔

下載