精华内容
下载资源
问答
  • $("#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,...

    $("#searchKey").keydown(function(event) {

    var searchKey=$("#searchKey").val();

    if (event.keyCode == 13 && searchKey!="") {

    var i=0;

    $("#roomTree > li > ul > li").each(function(idx,obja){ //成都

    i=0;

    if(i==0){

    $(obja).css("display","none");

    }

    $(obja).find("> ul > li").each(function(idx,objb){ //区县

    i=0;

    if(i==0){

    $(objb).css("display","none");

    }

    $(objb).find("> ul > li").each(function(idx,objc){ //局站

    $(objc).css("display","none");

    // console.log($(objc).children("a").children("cite").text().indexOf("张家"))

    // console.log($(this).children("a").children("cite").html())

    if($(objc).find(" > a > cite").text().indexOf(searchKey) >= 0){

    $(obja).css("display","block");

    $(objb).css("display","block");

    $(objc).css("display","block");

    i++;

    }

    });

    });

    });

    //全部展开

    $("#roomTree li ul").attr("class","layui-show");

    $("#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,obja){

    $(obja).css("display","block");

    });

    //不展开

    $("#roomTree li ul").find("ul").each(function(idx,obj){

    $(this).attr("class","");

    });

    }

    });

    注意:本文归作者所有,未经作者允许,不得转载

    展开全文
  • 页面中有许多元素需要自动去完成一些处理,譬如导航菜单的小滑块、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

    展开全文
  • 元素功能的开启只需要加载element模块即会自动完成,譬如tab选项卡切换...如下:tab选项卡的使用示例:网站设置商品管理订单管理内容1内容2内容3加载element模块使得tab选项卡切换生效layui.use('element', function...

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

    • 网站设置
    • 商品管理
    • 订单管理
    内容1
    内容2
    内容3

    加载element模块使得tab选项卡切换生效layui.use('element', function(){

    var element = layui.element;

    //一些事件监听

    element.on('tab(demo)', function(data){

    console.log(data);

    });

    });

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

    ..........

    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

    • 标题1
    • 标题2
    • 标题3
    内容1
    内容2
    内容4

    //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】

    【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选项卡切换事件

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

    如:

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

    上述是一个已经设置了过滤器(lay-filter="demo")的进度条

    现在你只需要在某个事件或者语句中执行方法:element.progress('demo', '50%');

    即可改变进度

    展开全文
  • layui dom弹窗被遮住无法操作的问题

    千次阅读 2018-12-05 11:25:43
    弹窗被遮罩遮住,无法操作,弹窗代码如下 <script> function dialog(){ layer.open({ type: 1, title: "请选择", //area: ['520px', '395px'], shadeClose: true, /...

    先来个发生错误的截图:

    弹窗被遮罩遮住,无法操作,弹窗代码如下

    <script>
    function dialog(){
        layer.open({
    		  	type: 1,
    		  	title: "请选择",
    		  	//area: ['520px', '395px'],
    		  	shadeClose: true,
    		  	//skin: 'yourclass',
    		  	content: $("#dialog"),
    	   		btn: ['确定','取消'],  		
    		   	yes: function(index, layero){
    		    	layer.msg("确定", {icon: 1});
    		  	}
    		  	,btn2: function(index, layero){
    		    	layer.msg("取消");
    		    
    		    	//return false 开启该代码可禁止点击该按钮关闭
    		  	}
    		  	,cancel: function(){ 
    		    	//右上角关闭回调
    		    	layer.msg("取消2");
    		    	//return false 开启该代码可禁止点击该按钮关闭
    		  	}
    		});
        }                                        
    </script>
    
    <div id="dialog">
    	<form class="layui-form" action="" >
    		<div class="layui-form-item" pane="">
     			<label class="layui-form-label">原始复选框</label>
     			<div class="layui-input-block">
        			<input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
        			<input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
        			<input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
      			</div>
    		</div>
    	</form>
    </div>
    
    

    看了官方说法是由于body样式影响,我在这个页面不是放在body里面的,但是由于用的是layui单页版,每个页面都是套在主页面里面的,所以还是在body里面。

    将layui open 里面再加一个方法:

    success:function(layero){
                 var mask = $(".layui-layer-shade");
                 mask.appendTo(layero.parent());
                 //其中:layero是弹层的DOM对象
      },

    目的是将 弹层的遮罩DOM元素和弹层元素设置在同一层,

    具体代码如下:

    layer.open({
                  type: 1,
                  title: "请选择",
                  shadeClose: true,
                  content: $("#dialog"),
                   btn: ['确定','取消'],
                   success:function(layero){
                       var mask = $(".layui-layer-shade");
                       mask.appendTo(layero.parent());
                      //其中:layero是弹层的DOM对象
                 },        
                   yes: function(index, layero){
                    layer.msg("确定", {icon: 1});
                  }
                  ,btn2: function(index, layero){
                       layer.msg("取消");
                       //return false 开启该代码可禁止点击该按钮关闭
                  }
                  ,cancel: function(){ 
                        //右上角关闭回调
                        layer.msg("取消2");
                        //return false 开启该代码可禁止点击该按钮关闭
                  }
            });

     

                                                                                仅做记录用,如有雷同,不甚荣幸

     

     

    展开全文
  • 1. 原生 DOM 操作 vs. 通过框架封装操作。 这是一个性能 vs. 可维护性的取舍。框架的意义在于为你掩盖底层的 DOM 操作,让你用更声明式的方式来描述你的目的,从而让你的代码更容易维护。没有任何框架可以比纯手动的...
  • 引用layui时碰到DOM操作table表头的bug。正常思路是在页面加载结束后操作页面元素 而表头是在页面加载后Layui 再次渲染后的结果,以至于页面加载后不能直接用DOM操作表头内的元素 正确做法是将操作写在table....
  • 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下。 页面大概是酱紫的(我使用的AdminLTE和LayUI,AdminLTE用的是一个大神改的,链接...
  • LAYUI 折叠面板

    2020-10-27 19:43:14
    //注意:折叠面板 依赖 element 模块,否则无法进行功能性操作 layui.use(‘element’, function () { var element = layui.element; //折叠面板监听 element.on(‘collapse(filter)’, function(data){ // console....
  • ,{title:'操作', toolbar: '#barDemo', width:150} ]] ,done: function () { soulTable.render(this) } }); 详细介绍 一、支持使用的几种情况 demo 中都有示例 前端不分页 即 page:false 注意:layui框架...
  • Layui数据表格

    2019-05-28 08:55:38
    1、 elem:指定table容器的选择器或者DOM 2、 cols: 表头列的设置, 3、 url:异步数据的接口,具体路径、 除此之外,还有很多其它的参数,比如Page(分页操作),width(宽),height(高),data(直接赋值),...
  • react + layui 坑总结

    2017-05-04 20:28:00
    与react 结合的时候,layui 是纯dom操作,而react是虚拟dom ,二者的结合难免会出现诸多问题。 1 select 下拉框 默认值的修改要通过defaultValue 属性来修改,并且通过componentDidMount 来重新渲染from.render()...
  • layui-tab设置默认选中

    千次阅读 2020-06-10 22:39:53
    效果图: tab依赖:element,demo需要去layui-tab 中设置lay-filter="demo" layui.use('element', function() { var element = layui....由于在官方文档中找不到改功能,只能通过dom操作实现: $('.layui-tab
  • jquery easyui和bootstrap的区别是什么?JQueryEasyUIJQueryEasyUI是一组基于jQuery的UI插件集合体,而jQueryEasyUI的目标就是帮助web开发者更轻松的...●jquery是直接操作DOM;使用选择器($)选取DOM对象,对其进行...
  • *对于大部分后端来说,前端都是易如反掌了。尤其是在中小型项目中,是网站后台,如果给前端做费时费力,数据对接等错乱复杂。而layui就是专门给后端解决这些问题的,而且...layui 是基于dom操作,里面有引用jquer
  • 字符串被渲染为弹窗层之后,回自动转换为DOM,可以使用jq进行各种操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=.....
  • Layui(table删除行)

    千次阅读 2019-07-27 09:16:51
    LayuiTable里面数据可以存放在两个地方,一个是dom结构,一个是Table内的缓存。Dom结构的数据用来显示在视图层方便观看,缓存则是用来修改等操作。通常要保存的数据都是获取换存里面的数据。视图层的数据删除很容易...
  • layui的分页+模糊查询

    2019-05-15 17:33:08
    //删除对应行(tr)的DOM结构 layer.close(index); //向服务端发送删除指令 $.get("","id="+delId,function(rv){ if(rv.falg==false){ layer.msg('删除失败'); }else{ layer.msg('...
  • 在网上查了很多资料也没有解决,最后发现其实解决方案很简单,直接操作分页组件的DOM元素即可解决,具体步骤如下: 通过F12调试可以看到当前页码元素的class属性为layui-laypage-skip,分页数目为layui-...
  • Layui .render() 元素更新记得使用

    万次阅读 2017-11-30 09:42:33
    这几天写layui的 时候,js操作dom总是没有效果后来发现,需要调用一下*.render();//................. layui.use(['layer', 'form'], function () { //此处省略一万字 //......................... var form=...
  • layui 表格删除问题

    2020-09-21 15:04:00
    原因:删除操作,只删除对应当前table的数据的缓存,原始的data并未删除,当点击分页,重载数据时,table数据来自原始数据,就显示出来了 更改:增加 table.reload,重载数据,并删除原始数据中当前删除的item ...
  • 官网上查得监听导航菜单的点击当点击导航父级菜单和二级菜单时触发,回调函数返回所点击的...并没有给出更多的关于动态操作的方法。参考这个老兄的博客《layui禁用侧边导航栏点击事件》进行更改源码,并没有收到效...
  • Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短...解决思路及方案简单分析:根据需求——动态添加一行,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格...
  • ssm与layui表格数据绑定

    千次阅读 2017-12-31 22:43:44
    父子操作时要理解DOM元素,用parent对象获取父元素的DOM,如果想获取父窗口的动态值可以加一个用来保存变量,这种方法虽然比较本,但是确实好使。 另外进入controller时如果要是带参数不可以采用 路径?参数=值 ...
  • //得到select原始DOM对象 console.log(data.value); //得到被选中的值 }); 但是,这个事件需要操作页面,不可取。 三、结果 查看layui源码,关于select事件的实现,在form.js中,看实现的原理。自动触发sel
  • layui下拉选择之前端快速筛选

    千次阅读 2019-01-25 22:44:53
    有时候项目中会遇到一个下拉框,那么layui中的下拉是不二之选。它集成在form.js中,...通过往这个文本框输入值,可以使用监听器或者onchange事件,并与下拉项进行比较【隐藏的】从而进行联想匹配,并操作dom让显示...
  • 一、问题 不操作页面,实现模拟select的...刚开始查看layui官方文档,发现仅仅只是有select监听事件,即: form.on('select(filter)', function(data){ console.log(data.elem); //得到select原始DOM对象 co...
  • 由于layui的table是动态渲染,很多新手都无法对其进行更多的操作,为了能操作行的颜色改变我们需要获取页面生成的DOM,如何获取这个DOM?我们可以根据lay-id来确定是否是动态生成的table,找到table后我们就可以在table...
  • 实现的样式给你们看一波 ... 其实回显就是一个赋值的操作,先把form表单的那些input 框的id拿到,在展示成功的那里进行绑值 ... // 获得当前行 tr 的DOM对象 if (layEvent === 'plan') {//修改操作 var data =
  • 简单分析:根据需求——动态添加一行,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格的每一行的每一个单元格都有其样式,因此,要想动态添加的一行与Layui数据表格渲染...

空空如也

空空如也

1 2 3
收藏数 53
精华内容 21
关键字:

layui操作dom