搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

常用元素操作 - 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-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:设定可选值的对象,目前支持的选项如下述示例:

</>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. </div>
  4. <div class="layui-nav" lay-filter="test2">
  5. </div>
  6. 【JavaScript】
  7. //比如当你对导航动态插入了二级菜单,这时你需要重新去对它进行渲染
  8. element.render('nav', 'test1'); //对 lay-filter="test1" 所在导航重新渲染。注:layui 2.1.6 版本新增
  9. //……

语法: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 - 在每一个细节中,用心与你沟通