layui之Tab選項卡
阿新 • • 發佈：2019-02-14
Tab廣泛應用於Web頁面，因此layui也對其進行了良好的支援。Layui內建多種Tab風格，支援刪除選項卡、並提供響應式支援。
這是一個最基本的例子：
<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】
<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風格都支援響應式）：
額，感覺像是打了個小醬油。而事實上在自適應的頁面中（不固寬），它的意義才會呈現。
你可以對父層容器設定屬性 lay-allowClose="true" 來允許Tab選項卡被刪除
<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
無論是導航、還是Tab，都需依賴 element模組，大部分行為都是在載入完該模組後自動完成的，但一些互動操作，如Tab事件監聽等，需按照場景選擇性使用。
選項卡的全部程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
<!-- 注意：如果你直接複製所有程式碼到本地，上述css路徑需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>預設風格的Tab</legend>
</fieldset>
<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. 高度預設自適應，也可以隨意固寬。
<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>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>動態操作Tab</legend>
</fieldset>
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="11">網站設定</li>
<li lay-id="22">使用者管理</li>
<li lay-id="33">許可權分配</li>
<li lay-id="44">商品管理</li>
<li lay-id="55">訂單管理</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>
<div class="site-demo-button" style="margin-bottom: 0;">
<button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab項</button>
<button class="layui-btn site-demo-active" data-type="tabDelete">刪除：商品管理</button>
<button class="layui-btn site-demo-active" data-type="tabChange">切換到：使用者管理</button>
</div>
<!-- 示例-970 -->
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>Hash地址定位</legend>
</fieldset>
<div class="layui-tab" lay-filter="test">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="11">網站設定</li>
<li lay-id="22">使用者管理</li>
<li lay-id="33">許可權分配</li>
<li lay-id="44">商品管理</li>
<li lay-id="55">訂單管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
點選該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>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>簡潔風格的Tab</legend>
</fieldset>
<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" style="height: 100px;">
<div class="layui-tab-item layui-show">內容不一樣是要有，因為你可以監聽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>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>卡片風格的Tab</legend>
</fieldset>
<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">預設寬度是相對於父元素100%適應的，你也可以固定寬度。</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>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>當Tab數超過一定寬度</legend>
</fieldset>
<div class="layui-tab layui-tab-card" style="width: 290px;">
<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. 寬度足夠，就不會出現右上圖示；寬度不夠，就會開啟展開功能。
<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 class="layui-tab-item">6</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>帶刪除功能的Tab</legend>
</fieldset>
<div class="layui-tab layui-tab-card" 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" style="height: 150px;">
<div class="layui-tab-item layui-show">
1. 我個人比較喜歡卡片風格的，所以你發現又是以卡片的風格舉例
2. 刪除功能適用於所有風格
</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>
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接複製所有程式碼到本地，上述js路徑需要改成你本地的 -->
<script>
layui.use('element', function(){
var $ = layui.jquery
,element = layui.element; //Tab的切換功能，切換事件監聽等，需要依賴element模組
//觸發事件
var active = {
tabAdd: function(){
//新增一個Tab項
element.tabAdd('demo', {
title: '新選項'+ (Math.random()*1000|0) //用於演示
,content: '內容'+ (Math.random()*1000|0)
,id: new Date().getTime() //實際使用一般是規定好的id，這裡以時間戳模擬下
})
}
,tabDelete: function(othis){
//刪除指定Tab項
element.tabDelete('demo', '44'); //刪除：“商品管理”
othis.addClass('layui-btn-disabled');
}
,tabChange: function(){
//切換到指定Tab項
element.tabChange('demo', '22'); //切換到：使用者管理
}
};
$('.site-demo-active').on('click', function(){
var othis = $(this), type = othis.data('type');
active[type] ? active[type].call(this, othis) : '';
});
//Hash地址的定位
var layid = location.hash.replace(/^#test=/, '');
element.tabChange('test', layid);
element.on('tab(test)', function(elem){
location.hash = 'test='+ $(this).attr('lay-id');
});
});
</script>
</body>
</html>