Layui 選項功能

選項卡功能說明

layui-tab語法名稱

layui-tab 這是選項功能

語法使用方式

• 風格說明
  • 預設風格 layui-tab
  • 簡約風格 layui-tab-brief
  • 卡片風格 layui-tab-card

• 樣版說明
  • layui-tab 代表選項功能
    • layui-tab-title 代表選項的頭
      • layui-this 預設選擇
    • layui-tab-content 代表選項內容包裝體
      • layui-tab-item 具體選項內容
      • layui-show 顯示選項內容

• 屬性說明

  • lay-allowclose="true" 針對該選項可以關閉的選項
  • lay-filter="demo" 事件的過濾器同等於選擇器

• 代碼記錄

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>默认风格的Tab</legend>
    </fieldset>

    <div class="layui-tab" lay-filter="demo" lay-allowclose="true">
        <ul class="layui-tab-title">
            <li lay-id="1" class="layui-this mydemo">网站设置</li>
            <li lay-id="2" class="mydemo" >用户管理</li>
            <li lay-id="3" class="mydemo" >权限分配</li>
            <li lay-id="4" class="mydemo" >商品管理</li>
            <li lay-id="5" class="mydemo" >订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                1. 高度默认自适应，也可以随意固宽。
                <br>2. Tab进行了响应式处理，所以无需担心数量多少。
            </div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">内容5</div>
        </div>
    </div>
    <div class="layui-btn-group">
        <button type="button" class="layui-btn" id="add">增加一個tab</button>
        <button type="button" class="layui-btn" id="change">切換用戶管理</button>
        <button type="button" class="layui-btn" id="delete">刪除商品管理</button>
        <button type="button" class="layui-btn" id="deleteAll">刪除所有tab</button>
    </div>

• 模組的js

    <script>
        layui.use(['element', 'jquery'], function () {
            var $ = layui.jquery;
            var element = layui.element;

            // 新增選項標題
            $("#add").click(function () {
                element.tabAdd('demo', {
                    title: '新增標題'
                    , content: '新增標題內容' //支持传入html
                });

            });
            // 快速切換選項
            $("#change").click(function () {
                element.tabChange('demo', '2');
            });
            // 刪除指定的選項
            $("#delete").click(function () {
                element.tabDelete('demo', '4');
            });
            // 刪除 tab 上所有的選項
            $("#deleteAll").click(function () {
                var lis = $(".mydemo");
                $.each(lis, function (index, item) {
                    var layid = item.getAttribute('lay-id');
                    // alert(layid);
                    element.tabDelete('demo', layid);
                });
            });
        });
    </script>

補充說明

備註

參考相關網頁

• 官方 Tab选项卡