-
2021-09-03 18:19:41
将showList的内容循环后加入list中
<div id="list"> </div> <script type="text/html" id="showList"> {{d.name}} {{d.sex}} </script>
data.forEach(function (item) { $('#list').append(laytpl(showList.innerHTML).render(item)); });
遍历data的数据,将item的数据显示在showList中
更多相关内容 -
Layui 常用元素操作 - layui.element
2020-12-19 19:15:27页面中有许多元素需要自动去完成一些处理,譬如导航菜单的小滑块、Tab的切换等操作,他们往往不需要去单独调用一个方法来开启一项功能,而页面上恰恰有太多这样的小交互,所以我们统一归类为element组件。...页面中有许多元素需要自动去完成一些处理,譬如导航菜单的小滑块、Tab的切换等操作,他们往往不需要去单独调用一个方法来开启一项功能,而页面上恰恰有太多这样的小交互,所以我们统一归类为element组件。跟表单一样,基于元素属性和事件驱动的接口书写方式。模块加载名称:element
使用
元素功能的开启只需要加载element模块即会自动完成,所以不用跟其它模块一样为某一个功能而调用一个方法。她只需要找到她支持的元素,如你的页面存在一个 Tab元素块,那么element模块会自动赋予她该有的功能。
- 网站设置
- 商品管理
- 订单管理
内容1内容2内容3前提是你要加载element模块layui.use('element', function(){var element = layui.element;//一些事件监听element.on('tab(demo)', function(data){console.log(data);});});
预设元素属性
我们通过自定义元素属性来作为元素的功能参数,他们一般配置在容器外层,如:
…And So Onelement模块支持的元素如下表:属性名可选值说明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
内容1内容2内容4element.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
-
DOM无法操作layui中元素问题
2021-01-08 14:35:10引用layui时碰到DOM操作table表头的bug。正常思路是在页面加载结束后操作页面元素 而表头是在页面加载后Layui 再次渲染后的结果,以至于页面加载后不能直接用DOM操作表头内的元素 正确做法是将操作写在table....算是记录一个坑吧
引用layui时碰到DOM操作table表头的bug。正常思路是在页面加载结束后操作页面元素
而表头是在页面加载后Layui 再次渲染后的结果,以至于页面加载后不能直接用DOM操作表头内的元素
正确做法是将操作写在table.render中的回调函数done内
-
layui 的基本使用介绍
2020-12-19 19:15:14layui 的基本使用介绍全局配置layui.config({dir: '/res/layui/' //layui.js 所在路径(注意,如果是script单独引入layui.js,无需设定该参数。),一般情况下可以无视,version: false //一般用于更新模块缓存,默认不...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');
});
-
layui tree搜索树(dom操作)
2020-12-29 06:10:58$("#roomTree li ul").find("ul").each(function(idx,obj){ $(this).attr("class","layui-show"); }); } if (event.keyCode == 13 && searchKey=="") { $("#roomTree > li > ul ").find("li").each(function(idx,... -
layui-操作按钮
2021-04-20 10:01:23操作按钮 //放在table标签后面 <script type="text/html" id="barTool"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> //edit理解用来做事件的标记 <a class="layui-btn ... -
layui 操作iframe 层函数
2021-03-03 13:49:25layui.layer.open({ type: 2,//Layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加 载层)4(tips层), title: '选择组织机构', //标题 area: ['1000px', '400px'], //宽高 ... -
前端常用dom操作方式,实时更新(常用)
2021-10-23 19:05:20attr(),设置或返回被选元素的属性值 <input type="text" class="layui-input" id="outData" name="discountEndDate" value="{$data.discountEndDate}"> data.discountEndDate = '修改'; $('#outData').attr('value'... -
layui dom弹窗被遮住无法操作的问题
2018-12-05 11:25:43弹窗被遮罩遮住,无法操作,弹窗代码如下 <script> function dialog(){ layer.open({ type: 1, title: "请选择", //area: ['520px', '395px'], shadeClose: true, /... -
常用元素操作 - layui.element
2020-12-19 19:15:15元素功能的开启只需要加载element模块即会自动完成,譬如tab选项卡切换...如下:tab选项卡的使用示例:网站设置商品管理订单管理内容1内容2内容3加载element模块使得tab选项卡切换生效layui.use('element', function... -
DOM对象的基本操作
2022-05-05 17:16:08DOM对象: DOM的英文全称是Document Object Model,即文档对象模型。文档一般是指HTML文档,DOM对象模型将HTML文档组织为以Node对象为节点的层次结构。一个节点是一个Node对象。Node对象按照节点类型分为元素节点... -
Layui表格行添加编辑删除操作和保存数据代码
2020-06-11 17:19:17Layui表格行添加编辑删除操作和保存数据代码,基于layui table添加一行并实现在编辑行记录后保存数据的方法,可用于对表格数据快速维护,展示修改功能,灵活自如。 -
Ajax发送接收操作+DOM操作+Excel文件读取函数库
2021-08-01 11:08:50函数库包含常用Ajax发送接收操作、DOM创建修改删除操作、Excel文件读取解析操作、文件类型判断操作。 -
layui:table操作
2021-03-04 23:49:29table实例 <table id="book_table" lay-filter="book_table"></table> 头部工具栏(放在任意位置,只要在table中声明,即可自动匹配) ...button class="layui-btn layui-btn-sm" lay-ev -
LayUI⑴:表格的常用操作
2022-03-01 10:47:05这几天使用LayUI + PHP + MS SQL Server写一个小程序,开发工具... LayUI停止了更新,后面写程序可能使用LayUI就不多了,它还是有很多有点,使用它对付一些中小型程序还是挺好的。 1、LayUI初始化 //----------- -
Vue实现Layui的集成方法步骤
2020-10-15 10:52:46主要介绍了Vue实现Layui的集成方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 -
关于layui 下拉列表的change事件详解
2020-10-16 08:55:58今天小编就为大家分享一篇关于layui 下拉列表的change事件详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
layui表格渲染的常用操作
2019-08-13 09:19:46layui表格渲染的常用操作 -
layui框架与SSM前后台交互的方法
2020-10-16 10:17:18今天小编就为大家分享一篇layui框架与SSM前后台交互的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
layui自定义插件citySelect实现省市区三级联动选择
2020-12-02 23:35:06本文实例为大家分享了layui实现省市区三级联动选择的具体代码,供大家参考,具体内容如下 省市区三级菜单联动插件 /** * @ name : citySelect 省市区三级选择模块 * @ Author: aggerChen * @ version: 1.0 */ ... -
Layui的树形表格treeTable
2022-06-20 16:02:05Layui、treeTable、树形表格、无限层级 -
layui-v2.6.8-backup.zip
2022-04-19 23:34:05layui-v2.6.8-backup.zip -
layui递归实现动态左侧菜单
2020-10-16 15:41:45主要为大家详细介绍了layui递归实现动态左侧菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
Layui 设置select下拉框自动选中某项的方法
2020-10-18 05:26:19今天小编就为大家分享一篇Layui 设置select下拉框自动选中某项的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
layui 动态加载script标签没有加载到dom树里面便执行table.render
2021-09-05 10:07:49翻看了一下stackoverflow里的答案,觉得这个理由是说的通的:在append之后,DOM树更新了,但是浏览器的redraw还没有完成,这个时候对刚append上去的元素做操作是会失败的。比较简单的解决方案一个是加setTimeout,... -
layui的iframe父子操作方法
2021-02-06 23:37:10// 父页面刷新 五、父子页面传值 ayer.getChildFrame(selector, index) - 获取iframe页的DOM (selector为iframe页面的选择器,用来选中iframe页面的元素。Index为层的索引)。 六、success方法 在layer弹出层成功... -
layui table数据修改的回显方法
2020-12-10 19:07:39实现的样式给你们看一波 ... 其实回显就是一个赋值的操作,先把form表单的那些input 框的id拿到,在展示成功的那里进行绑值 ... // 获得当前行 tr 的DOM对象 if (layEvent === 'plan') {//修改操作 var data = -
layui——element模块
2019-10-12 09:53:14对页面中一部分元素(tab、progress、nav、breadcrumb、collapse)的操作需要处理接口,layui统一放到element模块处理; 1 预设元素属性 我们通过自定义元素属性来作为元素的功能参数,他们一般配置在容器外层;... -
SpringBoot+ layui +Echarts整合图表实例(统计港口收入预估数据走势)
2020-12-07 16:27:11使用SpringBoot+layui +Echarts开发数据统计图表(柱形图,饼图,折现图)案例中统计的数据是港口生产作业收入分析统计走势。 -
LayUi使用switch开关,动态的去控制它是否被启用的方法
2020-12-13 11:36:14layui中的switch开关,能够去显示当前的状态,是否是启用还是禁用。当时如果当前记录的某个值没有进行填写,这行记录就不能被启用。并且页面上也要让他不能进行操作。 直接上代码: // 页面状态栏事件监听 form....