久久精品无码一区二区日韩AⅤ,男人的天堂comwww,中文字幕人妻有码

文檔

功能支持

支持頁面多個Tab選項卡彈出菜單單獨定義
支持自定義彈出項和彈出事件（使用registMethod屬性進行注冊）
支持自定義圖標（目前僅支持LayUI默認圖標）

效果圖

調用說明

一個頁面一個Tab選項卡情況

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

<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">網站設置</li>
            <li lay-id="1">用戶管理</li>
            <li lay-id="2">權限分配</li>
            <li lay-id="3">商品管理</li>
            <li lay-id="4">訂單管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">這是 網站設置 內容</div>
            <div class="layui-tab-item">這是 用戶管理 內容</div>
            <div class="layui-tab-item">這是 權限分配 內容</div>
            <div class="layui-tab-item">這是 商品管理 內容</div>
            <div class="layui-tab-item">這是 訂單管理 內容</div>
        </div>
    </div>
</div>

注意：

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

JavaScript部分

默認渲染

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

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

自定義渲染項

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

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

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

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

        }
});

使用自定義彈出項最重要的就是navArr屬性。該屬性是一個對象集合，每一個對象描述了菜單項的一些基本信息（eventName：事件類型、title：菜單項標題、icon：圖標class類名）

使用自定義彈出項需要定義registMethod屬性，以便對eventName屬性指定的事件進行注冊
一個頁面一個Tab選項卡情況

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

<h1>選項卡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">網站設置</li>
            <li lay-id="1">用戶管理</li>
            <li lay-id="2">權限分配</li>
            <li lay-id="3">商品管理</li>
            <li lay-id="4">訂單管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">這是 網站設置 內容</div>
            <div class="layui-tab-item">這是 用戶管理 內容</div>
            <div class="layui-tab-item">這是 權限分配 內容</div>
            <div class="layui-tab-item">這是 商品管理 內容</div>
            <div class="layui-tab-item">這是 訂單管理 內容</div>
        </div>
    </div>
</div>

<h1>選項卡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">權限管理</li>
            <li lay-id="12">機構管理</li>
            <li lay-id="21">字典管理</li>
            <li lay-id="31">用戶管理</li>
            <li lay-id="41">物流管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">這是 權限管理 內容</div>
            <div class="layui-tab-item">這是 機構管理 內容</div>
            <div class="layui-tab-item">這是 字典管理 內容</div>
            <div class="layui-tab-item">這是 用戶管理 內容</div>
            <div class="layui-tab-item">這是 物流管理 內容</div>
        </div>
    </div>
</div>

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

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

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

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

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

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

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

    }
});

以上就可以實現(xiàn)一個頁面多個選項卡進行不同處理，實用性更強。

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

下載

立即下載去 GitHub 下載

該擴展組件由第三方用戶主動投遞，并由其自身進行維護，本站僅做收集。

layui 第三方組件平臺

Tab選項卡右鍵彈出菜單組件 tabrightmenu

文檔

下載