男女疯狂一边摸一边做羞羞视频|啊好深好硬快点用力别停动态图|亚洲一区无码中文字幕|特级无码毛片免费视频播放▽|久久狠狠躁免费观看|国内精品久久久久久网站

<form id="rcuvc"></form>

<sub id="rcuvc"></sub>

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

Ta**F

（第一次發(fā)布考慮欠周，修正之后發(fā)布...）為T(mén)ab選項卡增加右鍵彈出菜單，例如：關(guān)閉當前、關(guān)閉其它.... - 支持頁(yè)面多個(gè)Tab選項卡彈出菜單單獨定義 - 支持自定義彈出項和彈出事件（使用registMethod屬性進(jìn)行注冊） - 支持自定義圖標（目前僅支持LayUI默認圖標）

創(chuàng )建：2018-10-12

文檔

功能支持

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

效果圖

調用說(shuō)明

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

html部分
Tab選項卡使用官方提供模板： 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)站設置</li>
            <li lay-id="1">用戶(hù)管理</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">這是 網(wǎng)站設置 內容</div>
            <div class="layui-tab-item">這是 用戶(hù)管理 內容</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“屬性
> 為各個(gè)選項卡菜單項（li元素）加入“l(fā)ay-id”屬性進(jìn)行唯一標識。
> 其它內容自行處理即可！

JavaScript部分

默認渲染

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

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

自定義渲染項

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

    // 默認方式渲染全部：關(guān)閉當前（closethis）、關(guān)閉所有（closeall）、關(guān)閉其它（closeothers）、關(guān)閉左側所有（closeleft）、關(guān)閉右側所有（closeright）、刷新當前頁(yè)（refresh）
    rightmenu_.render({
        container: '#nav1',
        filter: 'main_tab1',
        navArr: [
            {eventName: 'closethis', title: '關(guān)閉當前', icon: 'layui-icon-close'},
            {eventName: 'closeall', title: '關(guān)閉所有'},
            {eventName: 'closeothers', title: '關(guān)閉其它'},
            //自定義菜單項，此時(shí)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屬性。該屬性是一個(gè)對象集合，每一個(gè)對象描述了菜單項的一些基本信息（eventName：事件類(lèi)型、title：菜單項標題、icon：圖標class類(lèi)名）

使用自定義彈出項需要定義registMethod屬性，以便對eventName屬性指定的事件進(jìn)行注冊
一個(gè)頁(yè)面一個(gè)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">網(wǎng)站設置</li>
            <li lay-id="1">用戶(hù)管理</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">這是 網(wǎng)站設置 內容</div>
            <div class="layui-tab-item">這是 用戶(hù)管理 內容</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">用戶(hù)管理</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">這是 用戶(hù)管理 內容</div>
            <div class="layui-tab-item">這是 物流管理 內容</div>
        </div>
    </div>
</div>

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

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

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

    // 渲染nav2，渲染默認部分彈出項+自定義彈出項
    rightmenu_.render({
        container: '#nav2',
        filter: 'main_tab2',
        // navArr：對象數組，每個(gè)對象包含dataType、title、method屬性
        navArr: [
            {eventName: 'closethis', title: '關(guān)閉當前', icon: 'layui-icon-close'},
            {eventName: 'closeall', title: '關(guān)閉所有'},
            {eventName: 'closeothers', title: '關(guān)閉其它'},
            //自定義菜單項，此時(shí)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);

    }
});

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

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

下載

立即下載去 GitHub 下載

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

男女疯狂一边摸一边做羞羞视频|啊好深好硬快点用力别停动态图|亚洲一区无码中文字幕|特级无码毛片免费视频播放▽|久久狠狠躁免费观看|国内精品久久久久久网站

<sub id="art5c"></sub>

<style id="art5c"></style>

<sub id="art5c"></sub>

<style id="art5c"></style>

<sub id="art5c"></sub>