layui——element模块

介绍

对页面中一部分元素(tab、progress、nav、breadcrumb、collapse)的操作需要处理接口,layui统一放到element模块处理;

 

1 预设元素属性

我们通过自定义元素属性来作为元素的功能参数,他们一般配置在容器外层;element模块支持的元素如下表:

属性名 可选值 说明

lay-filter 任意字符 事件过滤器(公用属性),主要用于事件的精确匹配,跟选择器是比较类似的。

lay-allowClose true 针对于Tab容器,是否允许选项卡关闭。默认不允许,即不用设置该属性

lay-separator 任意分隔符 针对于面包屑容器

 

2 基础方法

基础方法允许你在外部主动对元素发起一起操作,目前element模块提供的方法如下:

方法名 描述

var element = layui.element; element模块的实例 返回的element变量为该实例的对象,携带一些用于元素操作的基础方法

element.on(filter, callback); 用于元素的一些事件监听

element.tabAdd(filter, options); 用于新增一个Tab选项       

element.tabDelete(filter, layid); 用于删除指定的Tab选项 

element.tabChange(filter, layid); 用于外部切换到指定的Tab项上,参数同上

element.tab(options); 用于绑定自定义 Tab 元素(即非 layui 自带的 tab 结构)。该方法为 layui 2.1.6 新增   

element.progress(filter, percent); 用于动态改变进度条百分比: element.progress('demo', '30%');

 

3 更新渲染

跟表单元素一样,很多时候你的页面元素可能是动态生成的,这时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 版本新增

 

4 事件监听

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

element模块在Layui事件机制中注册了element模块事件,所以当你使用layui.onevent()自定义模块事件时,请勿占用element名。目前element模块所只支持tab事件,即选项卡切换事件;

 

4.1 监听选项卡切换事件

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

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

  console.log(data);

});

 

4.2 监听选项卡删除事件

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

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

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

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

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

});

 

4.3 监听导航菜单单击事件

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

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

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

});

 

4.4 监听折叠面板折叠事件

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

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

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

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

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

});

 

5 动态操作进度条

语法:element.progress(filter, percent);

例如:element.progress('demo', '50%');即可改变进度;

你可能感兴趣的:(前端框架,layui-tab)