页面中有许多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab的切换等操作，他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以我们统一归类为element组件。跟表单一样，基于元素属性和事件驱动的接口书写方式。模块加载名称：element

使用

元素功能的开启只需要加载element模块即会自动完成，所以不用跟其它模块一样为某一个功能而调用一个方法。她只需要找到她支持的元素，如你的页面存在一个 Tab元素块，那么element模块会自动赋予她该有的功能。

前提是你要加载element模块layui.use('element', function(){var element = layui.element;//一些事件监听element.on('tab(demo)', function(data){console.log(data);});});

预设元素属性

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

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

//JavaScriptelement.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选项卡切换事件

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

如：

监听选项卡切换

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或者falseconsole.log(data.title); //得到当前点击面板的标题区域DOM对象console.log(data.content); //得到当前点击面板的内容区域DOM对象});

动态操作进度条

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

如果你需要进度条更直观的例子，建议浏览：进度条演示页面

结语

事实上元素模块的大部分操作都是内部自动完成的，所以目前你发现他的接口很少呢。当然，我们也会不断增加element模块所支持的页面元素。

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户参考了本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://www.dengtar.com/15561.html

layui 的基本使用介绍

全局配置

layui.config({

dir: '/res/layui/' //layui.js 所在路径(注意，如果是script单独引入layui.js，无需设定该参数。)，一般情况下可以无视

,version: false //一般用于更新模块缓存，默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值，如：201610

,debug: false //用于开启调试模式，默认false，如果设为true，则JS模块的节点会保留在页面

,base: '' //设定扩展的Layui模块的所在目录，一般用于外部模块扩展

});

定义模块

方法：layui.define([mods], callback)

layui.define(function(exports){

//do something

exports('demo', function(){

alert('Hello World!');

});

});

加载所需模块

layui.use(['laypage', 'layedit'], function(){

var laypage = layui.laypage

,layedit = layui.layedit

//do something

});

layui.use(['laypage', 'layedit'], function(laypage, layedit){

//使用分页

laypage();

//建立编辑器

layedit.build();

});

动态加载CSS

layui.link(href)

本地存储

本地存储是对 localStorage 和 sessionStorage 的友好封装，可更方便地管理本地数据。

localStorage 持久化存储：layui.data(table, settings)，数据会永久存在，除非物理删除。

sessionStorage 会话性存储：layui.sessionData(table, settings)，页面关闭后即失效。注：layui 2.2.5 新增

获取设备信息

layui.device(key)

其它

方法/属性 描述

layui.cache 静态属性。获得一些配置及临时的缓存信息

layui.extend(options) 拓展一个模块别名，如：layui.extend({test: '/res/js/test'})

layui.each(obj, fn) 对象(Array、Object、DOM对象等)遍历，可用于取代for语句

layui.getStyle(node, name) 获得一个原始DOM节点的style属性值，如：layui.getStyle(document.body, 'font-size')

layui.img(url, callback, error) 图片预加载

layui.sort(obj, key, desc) 将数组中的对象按某个成员重新对该数组排序，如：layui.sort([{a: 3},{a: 1},{a: 5}], 'a')

layui.router() 获得location.hash路由，目前在Layui中没发挥作用。对做单页应用会派上用场。

layui.hint() 向控制台打印一些异常信息，目前只返回了error方法：layui.hint().error('出错啦')

layui.stope(e) 阻止事件冒泡

layui.onevent(modName, events, callback) 自定义模块事件，属于比较高级的应用。有兴趣的同学可以阅读layui.js源码以及form模块

layui.event(modName, events, params) 执行自定义模块事件，搭配onevent使用

layui.factory(modName) 用于获取模块对应的 define 回调函数

模块命名空间

layui 的模块接口会绑定在 layui 对象下，内部由 layui.define() 方法来完成。每一个模块都会一个特有的名字，并且无法被占用。所以你无需担心模块的空间被污染，除非你主动 delete layui.{模块名}。调用模块可通过 layui.use 方法来实现，然后再通过 layui 对象获得模块接口。

如何使用内部jQuery

//主动加载jquery模块

layui.use(['jquery', 'layer'], function(){

var

//重点处

,layer = layui.layer;

//后面就跟你平时使用jQuery一样

$('body').append('hello jquery');

});