layui的Tab选项卡知识
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>
