常用元素操作 - layui.element

阅读须知:当前文档仅针对layui系列更新:2019-02-10 19:07:24 阅读量:7574 评论跟帖:0 文档整理编辑:Larry

在layui中有许多小的交互依赖于layui.element组件,如水平、垂直导航菜单滑动效果、tab选项卡切换等等,这些交互操作往往不需要去单独调用一个方法来开启,在layui中统一归类为element组件,它基于元素属性和事件驱动的接口书写方式

温馨提示: 关于Layui的使用问题可直接在 larryms社区layui专区交流,本文档系列在后续会开启用户评论交流
基础使用

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

<div class="layui-tab" lay-filter="demo">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>商品管理</li>
<li>订单管理</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>
</div>

加载element模块使得tab选项卡切换生效

layui.use('element', function(){
var element = layui.element;
//一些事件监听
element.on('tab(demo)', function(data){
console.log(data);
});
});
Element模块预设元素属性

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

<div class="layui-tab" lay-allowClose="true" lay-filter="demo">…</div>      
<span class="layui-breadcrumb" lay-separator="|"></span>

..........

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
<ul id="tabHeader">
  <li>标题1</li>
  <li>标题2</li>
  <li>标题3</li>
</ul>
<div id="tabBody">
  <div class="xxx">内容1</div>
  <div class="xxx">内容2</div>
  <div class="xxx">内容4</div>
</div>
              
//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】
<div class="layui-nav" lay-filter="test1">
  …
</div>
 
<div class="layui-nav" lay-filter="test2">
  …
</div>
      
【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选项卡切换事件

默认情况下,事件所监听的是全部的元素,但如果你只想监听某一个元素,使用事件过滤器即可。
如:<div class="layui-tab" lay-filter="test"></div>

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);

<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
  <div class="layui-progress-bar" lay-percent="0%"></div>
</div>
 
上述是一个已经设置了过滤器(lay-filter="demo")的进度条
现在你只需要在某个事件或者语句中执行方法:element.progress('demo', '50%');
即可改变进度