目录
一:基本概念
选项卡依赖element模块
API
元素属性
基本使用:
二:选项卡风格
默认风格
简约风格
编辑
卡片风格
三:hash 状态匹配
四:tab相关操作
渲染 tab
添加 tab
删除 tab
切换 tab
自定义 tab
五:事件
tab 切换事件
tab 删除事件
一:基本概念
选项卡组件 tab
是指可进行标签页切换的一段容器,常广泛应用于 Web 页面。由于为了向下兼容等诸多历史原因,在 2.x 版本中,tab
组件属于 element
模块的子集
使用:需要加载导航模块,也需要引入核心的js文件
选项卡依赖element模块
<script type="text/javascript">
//选项卡依赖element模块
layui.use('element',function(){
var element = layui.element;
});
</script>
API
API | 描述 |
---|---|
var element = layui.element | 获得 element 模块。 |
element.render('tab', filter) | 渲染 tab 组件 |
element.tabAdd(filter, options) | 添加 tab 选项 |
element.tabDelete(filter, layid) | 删除 tab 选项 |
element.tabChange(filter, layid) | 切换 tab 选项 |
element.tab(options) | 绑定自定义 tab 元素 |
元素属性
属性 | 描述 |
---|---|
lay-allowclose | 是否开启删除图标。设置在 tab 容器 <ul class="layui-tab"> 上。 |
lay-id | tab 选项唯一 ID,一般用于外部对 tab 的删除和切换等操作。设置在 tab 中的 <li> 元素上 |
基本使用:
<div class="layui-tab" lay-filter="test-handle" lay-allowclose="true">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="11">标签1</li>
<li lay-id="22">标签2</li>
<li lay-id="33">标签3</li>
<li lay-id="44">标签4</li>
<li lay-id="55">标签5</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-btn-container">
<button class="layui-btn" lay-on="tabAdd">新增 tab 项</button>
<button class="layui-btn" lay-on="tabDelete">删除「标签4」</button>
<button class="layui-btn" lay-on="tabChange">切换到「标签3」</button>
</div>
<script>
layui.use(function(){
var element = layui.element;
var util = layui.util;
// 普通事件
util.on('lay-on', {
tabAdd: function(){
// 新增一个 tab 项
var label = (Math.random()*1000|0); // 标记 - 用于演示
element.tabAdd('test-handle', {
title: '新选项'+ label,
content: '内容-'+ label,
id: new Date().getTime() // 实际使用一般是规定好的id,这里以时间戳模拟下
})
},
tabDelete: function(othis){
// 删除指定 tab 项
element.tabDelete('test-handle', '44'); // 删除:“商品管理”
othis.addClass('layui-btn-disabled');
},
tabChange: function(){
// 切换到指定 tab 项
element.tabChange('test-handle', '33'); // 切换到:标签3
}
});
});
</script>
二:选项卡风格
tab 组件提供了三种 UI 风格,分别为:
风格 | className |
---|---|
默认风格 | class="layui-tab" |
简约风格 | class="layui-tab layui-tab-brief" |
卡片风格 | class="layui-tab layui-tab-card" |
默认风格
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">标签1</li>
<li>标签2</li>
<li>标签3</li>
<li>标签4</li>
<li>标签5</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 layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">标签1</li>
<li>标签2</li>
<li>标签3</li>
<li>标签4</li>
<li>标签5</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 layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">标签1</li>
<li>标签2</li>
<li>标签3</li>
<li>标签4</li>
<li>标签5</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>
三:hash 状态匹配
切换 tab 标签项后,地址栏同步 hash
值,当页面刷新时,tab 仍保持对应的切换状态
<div class="layui-tab" lay-filter="test-hash">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="11">标签1</li>
<li lay-id="22">标签2</li>
<li lay-id="33">标签3</li>
<li lay-id="44">标签4</li>
<li lay-id="55">标签5</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>
layui.use(function(){
var element = layui.element;
// hash 地址定位
var hashName = 'tabid'; // hash 名称
var layid = location.hash.replace(new RegExp('^#'+ hashName + '='), ''); // 获取 lay-id 值
// 初始切换
element.tabChange('test-hash', layid);
// 切换事件
element.on('tab(test-hash)', function(obj){
location.hash = hashName +'='+ this.getAttribute('lay-id');
});
});
</script>
四:tab相关操作
渲染 tab
element.render('tab', filter);
- 参数
'tab'
是渲染 tab 的固定值 - 参数
filter
: 对应 tab 容器lay-filter
的属性值
tab 组件会在元素加载完毕后,自动对 tab 元素完成一次渲染,因此该方法主要用于对动态插入的 tab 元素的初始化渲染
<div id="test"></div>
<script>
layui.use(function(){
var element = layui.element;
var $ = layui.$;
// 动态插入 tab 元素
$('#test').html(`
<div class="layui-tab" lay-filter="demo-filter-tab">
<!-- … -->
</div>
`);
// 渲染 tab 组件
element.render('tab', 'demo-filter-tab');
});
</script>
添加 tab
element.tabAdd(filter, options);
- 参数
filter
: tab 容器(class="layui-tab"
)的lay-filter
属性值 - 参数
options
: 添加 tab 时的属性可选项,见下表:
options | 描述 | 类型 |
---|---|---|
title | 选项卡的标题 | string |
content | 选项卡的内容,支持传入 html
|
string |
id | 选项卡标题元素的 lay-id 属性值 |
string |
删除 tab
element.tabDelete(filter, layid);
- 参数
filter
: tab 容器(class="layui-tab"
)的lay-filter
属性值 - 参数
layid
: 选项卡标题元素的lay-id
属性值
切换 tab
element.tabChange(filter, layid);
- 参数
filter
: tab 容器(class="layui-tab"
)的lay-filter
属性值 - 参数
layid
: 选项卡标题元素的lay-id
属性值
自定义 tab
element.tab(options);
- 参数
options
: 属性可选项,见下表:
options | 描述 | 类型 |
---|---|---|
headerElem | 指定自定义的 tab 头元素项选择器 | string / DOM |
bodyElem | 指定自定义的 tab 主题内容元素项选择器 | string / DOM |
该方法用于绑定自定义 tab 元素(即非 class="layui-tab
定义的结构)。示例如下:
<style>
.demo-tab-header .layui-btn.layui-this{border-color: #1E9FFF; color: #1E9FFF;}
.demo-tab-body>div{display: none;}
</style>
<!-- 任意自定义的 tab 元素 -->
<div class="demo-tab-header layui-btn-container" id="tabHeader">
<button class="layui-btn layui-btn-primary layui-this">标签1</button>
<button class="layui-btn layui-btn-primary">标签2</button>
<button class="layui-btn layui-btn-primary">标签3</button>
</div>
<div class="demo-tab-body" id="tabBody">
<div class="layui-show">内容-1</div>
<div>内容-2</div>
<div>内容-3</div>
</div>
<script>
layui.use(function(){
var element = layui.element;
// 绑定自定义的 tab 元素
element.tab({
headerElem: '#tabHeader>.layui-btn',
bodyElem: '#tabBody>div'
});
});
</script>
五:事件
tab 切换事件
element.on('tab(filter)', callback);
- 参数
tab(filter)
是一个特定结构。-
tab
为 tab 切换事件固定值; -
filter
为 tab 容器属性lay-filter
对应的值。
-
- 参数
callback
为事件执行时的回调函数,并返回一个object
类型的参数
例如:点击 tab 选项切换时触发
var element = layui.element;
// tab 切换事件
element.on('tab(filter)', function(data){
console.log(this); // 当前 tab 标题所在的原始 DOM 元素
console.log(data.index); // 得到当前 tab 项的所在下标
console.log(data.elem); // 得到当前的 tab 容器
});
tab 删除事件
element.on('tabDelete(filter)', callback);
文章来源:https://www.toymoban.com/news/detail-733527.html
- 参数
tabDelete(filter)
是一个特定结构。-
tabDelete
为 tab 删除事件固定值; -
filter
为 tab 容器属性lay-filter
对应的值。
-
- 参数
callback
为事件执行时的回调函数,并返回一个object
类型的参数。
例如:点击 tab 选项删除时触发文章来源地址https://www.toymoban.com/news/detail-733527.html
var element = layui.element;
// tab 删除事件
element.on('tabDelete(filter)', function(data){
console.log(data.index); // 得到被删除的 tab 项的所在下标
console.log(data.elem); // 得到当前的 tab 容器
});
到了这里,关于Layui快速入门之第六节 选项卡的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!