← 返回首页

element模块元素操作文档 - Layui

📁 <Category 7> 📅 2026-04-04 13:39:47 👁️ 2 次阅读
<Tag 15>

📖 正文内容


常用元素操作 - layui.element

页面中有许多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab 的切换等操作，他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以我们统一归类为 element 组件。
模块加载名称：element
使用
元素功能的开启只需要加载element模块即会自动完成，所以不用跟其它模块一样为某一个功能而调用一个方法。她只需要找到她支持的元素，如你的页面存在一个 Tab元素块，那么element模块会自动赋予她该有的功能。

HTMLcode

  1. <div class="layui-tab" lay-filter="demo">
  2. <ul class="layui-tab-title">
  3. <li class="layui-this">网站设置</li>
  4. <li>商品管理</li>
  5. <li>订单管理</li>
  6. </ul>
  7. <div class="layui-tab-content">
  8. <div class="layui-tab-item layui-show">内容1</div>
  9. <div class="layui-tab-item">内容2</div>
  10. <div class="layui-tab-item">内容3</div>
  11. </div>
  12. </div>
前提是你要加载element模块

JavaScriptcode

  1. layui.use('element', function(){
  2. var element = layui.element;
  3. //一些事件触发
  4. element.on('tab(demo)', function(data){
  5. console.log(data);
  6. });
  7. });
预设元素属性
我们通过自定义元素属性来作为元素的功能参数，他们一般配置在容器外层，如：

</>code

  1. <div class="layui-tab" lay-allowClose="true" lay-filter="demo">…</div>
  2. <span class="layui-breadcrumb" lay-separator="|"></span>
  3. And So On
element 模块支持的元素如下表：
属性名可选值说明
lay-filter任意字符事件过滤器（公用属性），主要用于事件的精确匹配，跟选择器是比较类似的。
lay-allowClosetrue针对于Tab容器，是否允许选项卡关闭。默认不允许，即不用设置该属性
lay-separator任意分隔符针对于面包屑容器

基础方法
基础方法允许你在外部主动对元素发起一起操作，目前element模块提供的方法如下：
方法名描述
var element = layui.element;
element模块的实例
返回的element变量为该实例的对象，携带一些用于元素操作的基础方法
element.on(filter, callback);用于元素的一些事件触发
element.tabAdd(filter, options);
用于新增一个Tab选项
参数filter：tab元素的 lay-filter="value" 过滤器的值（value）
参数options：设定可选值的对象，目前支持的选项如下述示例：

</>code

  1. element.tabAdd('demo', {
  2. title: '选项卡的标题'
  3. ,content: '选项卡的内容' //支持传入html
  4. ,id: '选项卡标题的lay-id属性值'
  5. });
element.tabDelete(filter, layid);
用于删除指定的Tab选项
参数filter：tab元素的 lay-filter="value" 过滤器的值（value）
参数layid：选项卡标题列表的 属性 lay-id 的值

示例code

  1. element.tabDelete('demo', 'xxx'); //删除 lay-id="xxx" 的这一项
element.tabChange(filter, layid);
用于外部切换到指定的Tab项上，参数同上，如：
element.tabChange('demo', 'layid'); //切换到 lay-id="yyy" 的这一项
element.tab(options);
用于绑定自定义 Tab 元素（即非 layui 自带的 tab 结构）。该方法为 layui 2.1.6 新增
参数options：设定可选值的对象，目前支持的选项如下述示例：

</>code

  1. //HTML
  2. <ul id="tabHeader">
  3. <li>标题1</li>
  4. <li>标题2</li>
  5. <li>标题3</li>
  6. </ul>
  7. <div id="tabBody">
  8. <div class="xxx">内容1</div>
  9. <div class="xxx">内容2</div>
  10. <div class="xxx">内容4</div>
  11. </div>
  12. //JavaScript
  13. element.tab({
  14. headerElem: '#tabHeader>li' //指定tab头元素项
  15. ,bodyElem: '#tabBody>.xxx' //指定tab主体元素项
  16. });
element.progress(filter, percent);
用于动态改变进度条百分比：
element.progress('demo', '30%');

更新渲染
更新渲染
跟表单元素一样，很多时候你的页面元素可能是动态生成的，这时element的相关功能将不会对其有效，你必须手工执行 element.init(type, filter) 方法即可。注意：2.1.6 开始，可以用 element.render(type, filter); 方法替代
第一个参数：type，为表单的type类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表：
参数（type）值描述
tab重新对tab选项卡进行初始化渲染
nav重新对导航进行渲染
breadcrumb重新对面包屑进行渲染
progress重新对进度条进行渲染
collapse重新对折叠面板进行渲染

例子code

  1. element.init(); //更新全部 2.1.6 可用 element.render() 方法替代
  2. element.render('nav'); //重新对导航进行渲染。注：layui 2.1.6 版本新增
  3. //……
第二个参数：filter，为元素的 lay-filter="" 的值。你可以借助该参数，完成指定元素的局部更新。

</>code

  1. 【HTML】
  2. <div class="layui-nav" lay-filter="test1">
  3. …
  4. </div>
  5. <div class="layui-nav" lay-filter="test2">
  6. …
  7. </div>
  8. 【JavaScript】
  9. //比如当你对导航动态插入了二级菜单，这时你需要重新去对它进行渲染
  10. element.render('nav', 'test1'); //对 lay-filter="test1" 所在导航重新渲染。注：layui 2.1.6 版本新增
  11. //……
事件触发
语法：element.on('event(过滤器值)', callback);
element 模块在 layui 事件机制中注册了element 模块事件，所以当你使用 layui.onevent() 自定义模块事件时，请勿占用 element 名。目前 element 模块所支持的事件如下表：
event描述
tab触发 Tab 选项卡切换事件
tabDelete触发 Tab 选项卡删除事件
nav触发导航菜单的点击事件
collapse触发折叠面板展开或收缩事件
默认情况下，事件所触发的是全部的元素，但如果你只想触发某一个元素，使用事件过滤器即可。
如：<div class="layui-tab" lay-filter="test"></div>

</>code

  1. element.on('tab(test)', function(data){
  2. console.log(data);
  3. });
触发选项卡切换
Tab选项卡点击切换时触发，回调函数返回一个object参数，携带两个成员：

</>code

  1. element.on('tab(filter)', function(data){
  2. console.log(this); //当前Tab标题所在的原始DOM元素
  3. console.log(data.index); //得到当前Tab的所在下标
  4. console.log(data.elem); //得到当前的Tab大容器
  5. });
触发选项卡删除
Tab选项卡被删除时触发，回调函数返回一个object参数，携带两个成员：

</>code

  1. element.on('tabDelete(filter)', function(data){
  2. console.log(this); //当前Tab标题所在的原始DOM元素
  3. console.log(data.index); //得到当前Tab的所在下标
  4. console.log(data.elem); //得到当前的Tab大容器
  5. });
注：该事件为 layui 2.1.6 新增
触发导航菜单的点击
当点击导航父级菜单和二级菜单时触发，回调函数返回所点击的菜单DOM对象：

</>code

  1. element.on('nav(filter)', function(elem){
  2. console.log(elem); //得到当前点击的DOM对象
  3. });
触发折叠面板
当折叠面板点击展开或收缩时触发，回调函数返回一个object参数，携带三个成员：

</>code

  1. element.on('collapse(filter)', function(data){
  2. console.log(data.show); //得到当前面板的展开状态，true或者false
  3. console.log(data.title); //得到当前点击面板的标题区域DOM对象
  4. console.log(data.content); //得到当前点击面板的内容区域DOM对象
  5. });
动态操作进度条
你肯定不仅仅是满足于进度条的初始化显示，通常情况下你需要动态改变它的进度值，element模块提供了这样的基础方法：element.progress(filter, percent);。

例子code

  1. <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
  2. <div class="layui-progress-bar" lay-percent="0%"></div>
  3. </div>
  4. 上述是一个已经设置了过滤器（lay-filter="demo"）的进度条
  5. 现在你只需要在某个事件或者语句中执行方法：element.progress('demo', '50%');
  6. 即可改变进度
如果你需要进度条更直观的例子，建议浏览：进度条演示页面
结语
事实上元素模块的大部分操作都是内部自动完成的，所以目前你发现他的接口很少呢。当然，我们也会不断增加element模块所支持的页面元素。
layui - 在每一个细节中，用心与你沟通

💡 示例代码

💭 技巧提示

💡

📚 参考资料

🔗 相关文章

CSS3动画类文档 - Layui

Layui框架

CSS3动画类 在实用价值的前提之下，我们并没有内置过多花俏的动画。而他们同样在 layui 的许多交互元素中，发挥着重要的作用。layui 的动画全部采用 CSS3，因此不支持 ie8 和部分不支持 ie9。 动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。如： </>code其中 layui-anim 是必须的，后面跟着的即是不同的动画类<div class="layui-...

2026-04-04
Layui CSS3动画类文档

layer弹层组件开发文档 - Layui

Layui框架

 弹层组件文档 - layui.layerlayer 至今仍作为 layui 的代表作，它的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在 Web 开发者的圈子里口口相传，乃至于成为今天的 layui 最强劲的源动力。目前，layer 已然成为网页弹出层的首选交互方案，几乎随处可见。模块加载名称：layer，独立版本...

2026-04-04
Layui

Layui 底层方法

Layui框架

底层方法本篇主要介绍基础库所发挥的作用，其中过滤了大部分在外部不常用的方法，侧重罗列了基础框架支撑。全局配置方法：layui.config(options)你可以在使用模块之前，全局化配置一些参数，尽管大部分时候它不是必须的。所以我们目前提供的全局配置项非常少，这也是为了减少一些不必要的工作，尽可能让使用变得更简单。目前支持的全局配置项如下：</>codelayui.config({dir: '/...

2026-04-04
Layui 底层方法

💬 评论交流

👤
用户 A 2026-03-25

这个技巧很实用，感谢分享！