选项卡组件 tab

您所在的位置：网站首页 › element菜单导航卡顿 › 选项卡组件 tab

选项卡组件 tab

2024-07-11 02:12| 来源: 网络整理| 查看: 265

选项卡组件

选项卡组件 tab 是指可进行标签页切换的一段容器，常广泛应用于 Web 页面。由于为了向下兼容等诸多历史原因，在 2.x 版本中，tab 组件属于 element 模块的子集。

示例 hash 状态匹配

切换 tab 标签项后，地址栏同步 hash 值，当页面刷新时，tab 仍保持对应的切换状态。

风格

tab 组件提供了三种 UI 风格，分别为：

风格 className 默认风格 class="layui-tab" 简约风格 class="layui-tab layui-tab-brief" 卡片风格 class="layui-tab layui-tab-card" 默认风格简约风格卡片风格 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 容器上。 2.9.11+: 若需要单独关闭某一个选项卡的删除图标，可在选项卡标题元素上设置 lay-allowclose="false" lay-id tab 选项唯一 ID，一般用于外部对 tab 的删除和切换等操作。设置在 tab 中的元素上。在外部附加选项卡拖拽排序时，layui-tab-item 元素也要设置 ID 开启删除渲染 tab

element.render('tab', filter);

参数 'tab' 是渲染 tab 的固定值参数 filter : 对应 tab 容器 lay-filter 的属性值

tab 组件会在元素加载完毕后，自动对 tab 元素完成一次渲染，因此该方法主要用于对动态插入的 tab 元素的初始化渲染。

layui.use(function(){ var element = layui.element; var $ = layui.$; // 动态插入 tab 元素 $('#test').html(` `); // 渲染 tab 组件 element.render('tab', 'demo-filter-tab'); }); 添加 tab

element.tabAdd(filter, options);

参数 filter : tab 容器（class="layui-tab"）的 lay-filter 属性值参数 options : 添加 tab 时的属性可选项，见下表： options 描述类型默认 title 选项卡的标题 string - content 选项卡的内容，支持传入 html string - id 选项卡标题元素的 lay-id 属性值 string - change 是否添加 tab 完毕后即自动切换 boolean false allowClose 2.9.11+ 是否开启删除图标 boolean false

该方法用于添加 tab 选项。用法详见 : #示例

删除 tab

element.tabDelete(filter, layid);

参数 filter : tab 容器（class="layui-tab"）的 lay-filter 属性值参数 layid : 选项卡标题元素的 lay-id 属性值

该方法用于删除 tab 选项。用法详见 : #示例

切换 tab

element.tabChange(filter, layid);

参数 filter : tab 容器（class="layui-tab"）的 lay-filter 属性值参数 layid : 选项卡标题元素的 lay-id 属性值

该方法用于切换到对应的 tab 选项。用法详见 : #示例

自定义 tab

element.tab(options);

参数 options : 属性可选项，见下表： options 描述类型 headerElem 指定自定义的 tab 头元素项选择器 string / DOM bodyElem 指定自定义的 tab 主题内容元素项选择器 string / DOM

该方法用于绑定自定义 tab 元素（即非 class="layui-tab 定义的结构）。示例如下：

事件 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 容器 console.log(data.id); // 得到当前的 tab ID(2.9.11+) }); tab 删除事件

element.on('tabDelete(filter)', callback);

参数 tabDelete(filter) 是一个特定结构。 tabDelete 为 tab 删除事件固定值； filter 为 tab 容器属性 lay-filter 对应的值。参数 callback 为事件执行时的回调函数，并返回一个 object 类型的参数。

点击 tab 选项删除时触发。

var element = layui.element; // tab 删除事件 element.on('tabDelete(filter)', function(data){ console.log(data.index); // 得到被删除的 tab 项的所在下标 console.log(data.elem); // 得到当前的 tab 容器 console.log(data.id); // 得到被删除的 tab 项的 ID(2.9.11+) }); tab 删除前的事件 2.9.11+

element.on('tabBeforeDelete(filter)', callback);

参数 tabBeforeDelete(filter) 是一个特定结构。 tabBeforeDelete 为 tab 删除事件固定值； filter 为 tab 容器属性 lay-filter 对应的值。参数 callback 为事件执行时的回调函数，并返回一个 object 类型的参数。

点击 tab 选项删除前触发。

var element = layui.element; // tab 删除前的事件 element.on('tabBeforeDelete(filter)', function(data){ console.log(data.index); // 得到被删除的 tab 项的所在下标 console.log(data.elem); // 得到当前的 tab 容器 console.log(data.id); // 得到被删除的 tab 项的 ID(2.9.11+) if(data.id === 'home') return false; // 返回 false 时阻止关闭对应的选项卡 });

【本文地址】

选项卡组件 tab

选项卡组件 tab

今日新闻

推荐新闻