<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 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 - 用心與你溝通

      亚洲图色