Tab選項卡 - 頁面元素

                    導航菜單可應用于頭部和側邊,Tab選項卡提供多套風格,支持響應式,支持刪除選項卡等功能。面包屑結構簡單,支持自定義分隔符。
                    依賴加載組件:element (請注意:必須加載element模塊,相關功能才能正常使用,詳見:內置組件 - 常用元素操作)

                    Tab廣泛應用于Web頁面,因此我們也對其進行了良好的支持。Layui內置多種Tab風格,支持刪除選項卡、并提供響應式支持。
                    這是一個最基本的例子:

                    • 網站設置
                    • 用戶管理
                    • 權限分配
                    • 商品管理
                    • 訂單管理
                    如果需要對Tab進行外部新增、刪除、切換等操作,請移步到“內置組件-常用元素操作”頁面中查閱:基礎方法
                    內容2
                    內容3
                    內容4
                    內容5
                    <div class="layui-tab">
                      <ul class="layui-tab-title">
                        <li class="layui-this">網站設置</li>
                        <li>用戶管理</li>
                        <li>權限分配</li>
                        <li>商品管理</li>
                        <li>訂單管理</li>
                      </ul>
                      <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">內容1</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>
                     
                    <script>
                    //注意:選項卡 依賴 element 模塊,否則無法進行功能性操作
                    layui.use('element', function(){
                      var element = layui.element;
                      
                      //…
                    });
                    </script>
                          
                    • 網站設置
                    • 用戶管理
                    • 權限分配
                    • 商品管理
                    • 訂單管理
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                      <ul class="layui-tab-title">
                        <li class="layui-this">網站設置</li>
                        <li>用戶管理</li>
                        <li>權限分配</li>
                        <li>商品管理</li>
                        <li>訂單管理</li>
                      </ul>
                      <div class="layui-tab-content"></div>
                    </div>      
                          

                    通過追加class:layui-tab-brief 來設定簡潔風格。
                    值得注意的是,如果存在 layui-tab-item 的內容區域,在切換時自動定位到對應內容。如果不存在內容區域,則不會定位到對應內容。你通常需要設置過濾器,通過 element模塊的監聽tab事件來進行切換操作。詳見文檔左側【內置組件 - 基本元素操作 element】

                    • 網站設置
                    • 用戶管理
                    • 權限分配
                    • 商品管理
                    • 訂單管理
                    1
                    2
                    3
                    4
                    5
                    6
                    <div class="layui-tab layui-tab-card">
                      <ul class="layui-tab-title">
                        <li class="layui-this">網站設置</li>
                        <li>用戶管理</li>
                        <li>權限分配</li>
                        <li>商品管理</li>
                        <li>訂單管理</li>
                      </ul>
                      <div class="layui-tab-content" style="height: 100px;">
                        <div class="layui-tab-item layui-show">1</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 class="layui-tab-item">6</div>
                      </div>
                    </div>
                          

                    通過追加class:layui-tab-card來設定卡片風格

                    當容器的寬度不足以顯示全部的選項時,即會自動出現展開圖標,如下以卡片風格為例(注意:所有Tab風格都支持響應式):

                    • 網站設置
                    • 用戶管理
                    • 權限分配
                    • 商品管理
                    • 訂單管理
                    1
                    2
                    3
                    4
                    5
                    6

                    額,感覺像是打了個小醬油。而事實上在自適應的頁面中(不固寬),它的意義才會呈現。

                    你可以對父層容器設置屬性 lay-allowClose="true" 來允許Tab選項卡被刪除

                    • 網站設置
                    • 用戶基本管理
                    • 權限分配
                    • 全部歷史商品管理文字長一點試試
                    • 訂單管理
                    1
                    2
                    3
                    4
                    5
                    6
                    <div class="layui-tab" lay-allowClose="true">
                      <ul class="layui-tab-title">
                        <li class="layui-this">網站設置</li>
                        <li>用戶基本管理</li>
                        <li>權限分配</li>
                        <li>全部歷史商品管理文字長一點試試</li>
                        <li>訂單管理</li>
                      </ul>
                      <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">1</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 class="layui-tab-item">6</div>
                      </div>
                    </div>
                          

                    與默認相比沒有什么特別的結構,就是多了個屬性 lay-allowClose="true"

                    你可以通過對選項卡設置屬性 lay-id="xxx" 來作為唯一的匹配索引,以用于外部的定位切換,如后臺的左側導航、以及頁面地址 hash的匹配。

                    <div class="layui-tab" lay-filter="test1">
                      <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="111" >文章列表</li>
                        <li lay-id="222">發送信息</li>
                        <li lay-id="333">權限分配</li>
                        <li lay-id="444">審核</li>
                        <li lay-id="555">訂單管理</li>
                      </ul>
                      <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">1</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>
                          

                    屬性 lay-id 是扮演這項功能的主要角色,它是動態操作的重要憑據,如:

                    <script>
                    layui.use('element', function(){
                      var element = layui.element;
                      
                      //獲取hash來切換選項卡,假設當前地址的hash為lay-id對應的值
                      var layid = location.hash.replace(/^#test1=/, '');
                      element.tabChange('test1', layid); //假設當前地址為:http://a.com#test1=222,那么選項卡會自動切換到“發送消息”這一項
                      
                      //監聽Tab切換,以改變地址hash值
                      element.on('tab(test1)', function(){
                        location.hash = 'test1='+ this.getAttribute('lay-id');
                      });
                    });
                    </script>      
                          

                    同樣的還有增加選項卡和刪除選項卡,都需要用到 lay-id,更多動態操作請閱讀:element模塊

                    無論是導航、還是Tab,都需依賴 element模塊,大部分行為都是在加載完該模塊后自動完成的,但一些交互操作,如Tab事件監聽等,需按照場景選擇性使用。你可以移步文檔左側【內置組件 - 基本元素操作 element】了解詳情

                    layui - 用心與你溝通

                    亚洲图色