元素功能的开启只需要加载element模块即会自动完成，譬如tab选项卡切换、导航菜单滑动切换效果、面包屑导航、进度条等，使用这些小交互功能的前提就是：拥有符合这些小功能的所需正确的HTML结构，以及加载element模块；如下：tab选项卡的使用示例：

加载element模块使得tab选项卡切换生效layui.use('element', function(){

var element = layui.element;

//一些事件监听

element.on('tab(demo)', function(data){

console.log(data);

});

});

通过自定义元素属性来作为元素的功能参数，他们一般配置在容器外层，如：

..........

element模块支持的元素如下表：

属性名

可选值

说明

lay-filter

任意字符

事件过滤器(公用属性)，主要用于事件的精确匹配，跟选择器是比较类似的。

lay-allowClose

true

针对于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：设定可选值的对象，目前支持的选项如下述示例：

element.tabAdd('demo', {

title: '选项卡的标题'

,content: '选项卡的内容' //支持传入html

,id: '选项卡标题的lay-id属性值'

});

element.tabDelete(filter, layid);

用于删除指定的Tab选项

参数filter：tab元素的 lay-filter="value" 过滤器的值(value)

参数layid：选项卡标题列表的 属性 lay-id 的值

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：设定可选值的对象，目前支持的选项如下述示例：

//HTML

• 标题1
• 标题2
• 标题3

//JavaScript

element.tab({

headerElem: '#tabHeader>li' //指定tab头元素项

,bodyElem: '#tabBody>.xxx' //指定tab主体元素项

});

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

重新对折叠面板进行渲染

element.init(); //更新全部 2.1.6 可用 element.render() 方法替代

element.render('nav'); //重新对导航进行渲染。注：layui 2.1.6 版本新增

//……

第二个参数：filter，为元素的 lay-filter="" 的值。你可以借助该参数，完成指定元素的局部更新。

【HTML】

【JavaScript】

//比如当你对导航动态插入了二级菜单，这时你需要重新去对它进行渲染

element.render('nav', 'test1'); //对 lay-filter="test1" 所在导航重新渲染。注：layui 2.1.6 版本新增

//……

语法：element.on('event(过滤器值)', callback);

element模块在Layui事件机制中注册了element模块事件，所以当你使用layui.onevent()自定义模块事件时，请勿占用element名。目前element模块所支持的事件如下表：

event

描述

tab

监听Tab选项卡切换事件

默认情况下，事件所监听的是全部的元素，但如果你只想监听某一个元素，使用事件过滤器即可。

如：

element.on('tab(test)', function(data){

console.log(data);

});

Tab选项卡点击切换时触发，回调函数返回一个object参数，携带两个成员：

element.on('tab(filter)', function(data){

console.log(this); //当前Tab标题所在的原始DOM元素

console.log(data.index); //得到当前Tab的所在下标

console.log(data.elem); //得到当前的Tab大容器

});

Tab选项卡被删除时触发，回调函数返回一个object参数，携带两个成员：

element.on('tabDelete(filter)', function(data){

console.log(this); //当前Tab标题所在的原始DOM元素

console.log(data.index); //得到当前Tab的所在下标

console.log(data.elem); //得到当前的Tab大容器

});

注：该事件为 layui 2.1.6 新增

当点击导航父级菜单和二级菜单时触发，回调函数返回所点击的菜单DOM对象：

element.on('nav(filter)', function(elem){

console.log(elem); //得到当前点击的DOM对象

});

当折叠面板点击展开或收缩时触发，回调函数返回一个object参数，携带三个成员：

element.on('collapse(filter)', function(data){

console.log(data.show); //得到当前面板的展开状态，true或者false

console.log(data.title); //得到当前点击面板的标题区域DOM对象

console.log(data.content); //得到当前点击面板的内容区域DOM对象

});

你肯定不仅仅是满足于进度条的初始化显示，通常情况下你需要动态改变它的进度值，element模块提供了这样的基础方法：element.progress(filter, percent);。

上述是一个已经设置了过滤器(lay-filter="demo")的进度条

现在你只需要在某个事件或者语句中执行方法：element.progress('demo', '50%');

即可改变进度