layui的公共類:
| lay-filter=" " | 事件過濾器。你可能會在很多地方看到他，他一般是用於監聽特定的自定義事件。你可以把它看作是一個ID選擇器 |
layui的公共屬性:
layui-show屬性:顯示頁面元素
tab選項卡介紹:
tab選項卡，可用於一個界面點擊，顯示另一個界面的內容 重要
依賴加載組件：element （請注意：必須加載element模塊，相關功能才能正常使用，詳見：內置組件 - 常用元素操作
基礎類:
layui-tab:放在div中定義一個tab選項卡
layui-tab-card:放在帶有layui-tab的div后面，表示一個卡片風格的選項卡
layui-tab-title:放在ul中定義一個選項卡菜單
layui-this:放在ul的第一個li中定義選項卡的菜單項
layui-tab-content:放在div中定義選項卡的菜單項的對應的具體內容區域
layui-tab-item:放在帶有layui-tab-content的div里面，定義每個菜單項的具體內容
layui-show:放在帶有layui-tab-item的div的第一個div里面 進入第一個菜單項頁面不用點擊直接顯示itme區域的內容
lay-allowClose屬性:你可以對父層容器(帶layui-tab的div)設置屬性 lay-allowClose="true" 來允許Tab選項卡被刪除
注意：
值得注意的是，如果存在 layui-tab-item 的內容區域，在切換時自動定位到對應內容。如果不存在內容區域，則不會定位到對應內容。
你通常需要設置過濾器，通過 element模塊的監聽tab事件來進行切換操作。詳見文檔
eg:基礎tab選項卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>開始使用layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!-- 你的HTML代碼 -->
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">網站設置</li>
<li>用戶管理</li>
<li>權限控制</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">寫網站設置界面的內容</div>
<div class="layui-tab-item">寫用戶管理界面的內容</div>
<div class="layui-tab-item">寫權限控制的頁面的內容</div>
</div>
</div>
<script src="layui/layui.js"></script>
<script>
//加載模塊
layui.use(['layer','compent','element'],function(){
var layer = layui.layer;
var element = layui.element;
layer.msg("風繼續吹!");
})
</script>
</body>
</html>
卡片風格選項卡(帶可刪除的tab)
- <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: 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>
ID焦點定位 重點
hash（哈希)
你可以通過對選項卡設置屬性 lay-id="xxx" 來作為唯一的匹配索引，以用於外部的定位切換，如后台的左側導航、以及頁面地址 hash的匹配。
- <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>