精华内容
下载资源
问答
  • layui操作dom
    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中

    更多相关内容
  • 页面中有许多元素需要自动去完成一些处理,譬如导航菜单的小滑块、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 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
    内容1
    内容2
    内容4
    //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时碰到DOM操作table表头的bug。正常思路是在页面加载结束后操作页面元素 而表头是在页面加载后Layui 再次渲染后的结果,以至于页面加载后不能直接用DOM操作表头内的元素 正确做法是将操作写在table....

    算是记录一个坑吧

    引用layui时碰到DOM操作table表头的bug。正常思路是在页面加载结束后操作页面元素

    而表头是在页面加载后Layui 再次渲染后的结果,以至于页面加载后不能直接用DOM操作表头内的元素

    正确做法是将操作写在table.render中的回调函数done内

    展开全文
  • layui 的基本使用介绍

    2020-12-19 19:15:14
    layui 的基本使用介绍全局配置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');

    });

    展开全文
  • $("#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:25
    layui.layer.open({ type: 2,//Layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加 载层)4(tips层), title: '选择组织机构', //标题 area: ['1000px', '400px'], //宽高 ...
  • attr(),设置或返回被选元素的属性值 <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
    弹窗被遮罩遮住,无法操作,弹窗代码如下 &lt;script&gt; function dialog(){ layer.open({ type: 1, title: "请选择", //area: ['520px', '395px'], shadeClose: true, /...
  • 元素功能的开启只需要加载element模块即会自动完成,譬如tab选项卡切换...如下:tab选项卡的使用示例:网站设置商品管理订单管理内容1内容2内容3加载element模块使得tab选项卡切换生效layui.use('element', function...
  • DOM对象的基本操作

    2022-05-05 17:16:08
    DOM对象: DOM的英文全称是Document Object Model,即文档对象模型。文档一般是指HTML文档,DOM对象模型将HTML文档组织为以Node对象为节点的层次结构。一个节点是一个Node对象。Node对象按照节点类型分为元素节点...
  • Layui表格行添加编辑删除操作和保存数据代码,基于layui table添加一行并实现在编辑行记录后保存数据的方法,可用于对表格数据快速维护,展示修改功能,灵活自如。
  • 函数库包含常用Ajax发送接收操作DOM创建修改删除操作、Excel文件读取解析操作、文件类型判断操作
  • layui:table操作

    2021-03-04 23:49:29
    table实例 <table id="book_table" lay-filter="book_table"></table> 头部工具栏(放在任意位置,只要在table中声明,即可自动匹配) ...button class="layui-btn layui-btn-sm" lay-ev
  • 这几天使用LayUI + PHP + MS SQL Server写一个小程序,开发工具... LayUI停止了更新,后面写程序可能使用LayUI就不多了,它还是有很多有点,使用它对付一些中小型程序还是挺好的。 1、LayUI初始化 //-----------
  • 主要介绍了Vue实现Layui的集成方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 今天小编就为大家分享一篇关于layui 下拉列表的change事件详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui表格渲染的常用操作

    千次阅读 2019-08-13 09:19:46
    layui表格渲染的常用操作
  • 今天小编就为大家分享一篇layui框架与SSM前后台交互的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 本文实例为大家分享了layui实现省市区三级联动选择的具体代码,供大家参考,具体内容如下 省市区三级菜单联动插件 /** * @ name : citySelect 省市区三级选择模块 * @ Author: aggerChen * @ version: 1.0 */ ...
  • Layui、treeTable、树形表格、无限层级
  • layui-v2.6.8-backup.zip

    2022-04-19 23:34:05
    layui-v2.6.8-backup.zip
  • 主要为大家详细介绍了layui递归实现动态左侧菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 今天小编就为大家分享一篇Layui 设置select下拉框自动选中某项的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 翻看了一下stackoverflow里的答案,觉得这个理由是说的通的:在append之后,DOM树更新了,但是浏览器的redraw还没有完成,这个时候对刚append上去的元素做操作是会失败的。比较简单的解决方案一个是加setTimeout,...
  • // 父页面刷新 五、父子页面传值 ayer.getChildFrame(selector, index) - 获取iframe页的DOM (selector为iframe页面的选择器,用来选中iframe页面的元素。Index为层的索引)。 六、success方法 在layer弹出层成功...
  • 实现的样式给你们看一波 ... 其实回显就是一个赋值的操作,先把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开发数据统计图表(柱形图,饼图,折现图)案例中统计的数据是港口生产作业收入分析统计走势。
  • layui中的switch开关,能够去显示当前的状态,是否是启用还是禁用。当时如果当前记录的某个值没有进行填写,这行记录就不能被启用。并且页面上也要让他不能进行操作。 直接上代码: // 页面状态栏事件监听 form....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,109
精华内容 843
热门标签
关键字:

layui操作dom