007-选项卡
1. Tab選項卡廣泛應(yīng)用于Web頁面, 因此我們也對其進行了良好的支持。Layui內(nèi)置多種Tab風(fēng)格, 支持刪除選項卡、并提供響應(yīng)式支持。
2. 選項卡依賴加載組件: element。
3. 選項卡使用
| 名稱 | 組合 |
| 默認 | class="layui-tab" |
| 選項卡標(biāo)題容器 | class="layui-tab-title" |
| 指向當(dāng)前選項卡標(biāo)題 | class="layui-this" |
| 選項卡內(nèi)容容器 | class="layui-tab-content" |
| 選項卡內(nèi)容項 | class="layui-tab-item" |
| 展示選項卡內(nèi)容項 | class="layui-tab-item layui-show" |
4. 默認Tab選項卡
4.1. 值得注意的是, 如果存在layui-tab-item的內(nèi)容區(qū)域, 在切換時自動定位到對應(yīng)內(nèi)容。如果不存在內(nèi)容區(qū)域, 則不會定位到對應(yīng)內(nèi)容。
4.2. 實例
<div class="layui-tab"><ul class="layui-tab-title"><li class="layui-this">網(wǎng)站設(shè)置</li><li>用戶管理</li><li>權(quán)限分配</li><li>商品管理</li><li>訂單管理</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">內(nèi)容1</div><div class="layui-tab-item">內(nèi)容2</div><div class="layui-tab-item">內(nèi)容3</div><div class="layui-tab-item">內(nèi)容4</div><div class="layui-tab-item">內(nèi)容5</div></div> </div>5. Tab簡潔風(fēng)格
5.1. 通過追加class: layui-tab-brief來設(shè)定簡潔風(fēng)格。
<div class="layui-tab layui-tab-brief"><ul class="layui-tab-title"><li class="layui-this">網(wǎng)站設(shè)置</li><li>用戶管理</li><li>權(quán)限分配</li><li>商品管理</li><li>訂單管理</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">內(nèi)容1</div><div class="layui-tab-item">內(nèi)容2</div><div class="layui-tab-item">內(nèi)容3</div><div class="layui-tab-item">內(nèi)容4</div><div class="layui-tab-item">內(nèi)容5</div></div> </div>6. Tab卡片風(fēng)格
6.1. 通過追加class: layui-tab-card來設(shè)定卡片風(fēng)格。
<div class="layui-tab layui-tab-card"><ul class="layui-tab-title"><li class="layui-this">網(wǎng)站設(shè)置</li><li>用戶管理</li><li>權(quán)限分配</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> </div>7. 帶刪除的Tab
7.1. 你可以對父層容器設(shè)置屬性lay-allowClose="true"來允許Tab選項卡被刪除。
<div class="layui-tab" lay-allowClose="true"><ul class="layui-tab-title"><li class="layui-this">網(wǎng)站設(shè)置</li><li>用戶管理</li><li>權(quán)限分配</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>8. ID焦點定位
8.1. 你可以通過對選項卡設(shè)置屬性lay-id="xxx"來作為唯一的匹配索引, 以用于外部的定位切換, 如后臺的左側(cè)導(dǎo)航、以及頁面地址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">發(fā)送信息</li><li lay-id="333">權(quán)限分配</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>8.2. 屬性lay-id是扮演這項功能的主要角色, 它是動態(tài)操作的重要憑據(jù), 如:
<script type="text/javascript">// 注意: 選項卡依賴element模塊, 否則無法進行功能性操作layui.use('element', function(){var element = layui.element;// 獲取hash來切換選項卡, 假設(shè)當(dāng)前地址的hash為lay-id對應(yīng)的值var layid = location.hash.replace(/^#test1=/, '');element.tabChange('test1', layid); // 假設(shè)當(dāng)前地址為: http://a.com#test1=222, 那么選項卡會自動切換到"發(fā)送消息"這一項// 監(jiān)聽Tab切換, 以改變地址hash值element.on('tab(test1)', function(){location.hash = 'test1='+ this.getAttribute('lay-id');});}); </script>8.3. 同樣的還有增加選項卡和刪除選項卡, 都需要用到lay-id。
9. 例子
9.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>選項卡 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><div class="layui-tab"><ul class="layui-tab-title"><li class="layui-this">網(wǎng)站設(shè)置</li><li>用戶管理</li><li>權(quán)限分配</li><li>商品管理</li><li>訂單管理</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">內(nèi)容1</div><div class="layui-tab-item">內(nèi)容2</div><div class="layui-tab-item">內(nèi)容3</div><div class="layui-tab-item">內(nèi)容4</div><div class="layui-tab-item">內(nèi)容5</div></div></div><div class="layui-tab layui-tab-brief"><ul class="layui-tab-title"><li class="layui-this">網(wǎng)站設(shè)置</li><li>用戶管理</li><li>權(quán)限分配</li><li>商品管理</li><li>訂單管理</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">內(nèi)容1</div><div class="layui-tab-item">內(nèi)容2</div><div class="layui-tab-item">內(nèi)容3</div><div class="layui-tab-item">內(nèi)容4</div><div class="layui-tab-item">內(nèi)容5</div></div></div> <div class="layui-tab layui-tab-card"><ul class="layui-tab-title"><li class="layui-this">網(wǎng)站設(shè)置</li><li>用戶管理</li><li>權(quán)限分配</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></div><div class="layui-tab" lay-allowClose="true"><ul class="layui-tab-title"><li class="layui-this">網(wǎng)站設(shè)置</li><li>用戶管理</li><li>權(quán)限分配</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><div class="layui-tab" lay-filter="test1"><ul class="layui-tab-title"><li class="layui-this" lay-id="111" >文章列表</li><li lay-id="222">發(fā)送信息</li><li lay-id="333">權(quán)限分配</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><script type="text/javascript">// 注意: 選項卡依賴element模塊, 否則無法進行功能性操作layui.use('element', function(){var element = layui.element;// 獲取hash來切換選項卡, 假設(shè)當(dāng)前地址的hash為lay-id對應(yīng)的值var layid = location.hash.replace(/^#test1=/, '');element.tabChange('test1', layid); // 假設(shè)當(dāng)前地址為: http://a.com#test1=222, 那么選項卡會自動切換到"發(fā)送消息"這一項// 監(jiān)聽Tab切換, 以改變地址hash值element.on('tab(test1)', function(){location.hash = 'test1='+ this.getAttribute('lay-id');});});</script></body> </html>9.2. 效果圖
總結(jié)
