精华内容
下载资源
问答
  • 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 开启该代码可禁止点击该按钮关闭
                  }
            });

     

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

     

     

    展开全文
  • 引用layui时碰到DOM操作table表头的bug。正常思路是在页面加载结束后操作页面元素 而表头是在页面加载后Layui 再次渲染后的结果,以至于页面加载后不能直接用DOM操作表头内的元素 正确做法是将操作写在table....

    算是记录一个坑吧

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

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

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

    展开全文
  • 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'], //宽高 ...
        layui.layer.open({
            type: 2,//Layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加 载层)4(tips层),
            title: '选择组织机构',   //标题
            area: ['1000px', '400px'],   //宽高
            shade: 0.4,   //遮罩透明度
            content: '{:url("ServiceCategory/role")}',//支持获取DOM元素
            btn: ['确定', '取消'], //按钮组
            scrollbar: false ,//屏蔽浏览器滚动条
            yes: function(index,layero){
                var body = layer.getChildFrame("body",index);//绑定父子之间的关系,用于数据传递,缺少则无法传递
                var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象
                //调用子页面的方法,将父页面的值作为参数传递过去
                var data = iframeWin.callback();
                console.log(data)
            },
            btn2: function(){
                //layer.alert('aaa',{title:'msg title'});  点击取消回调
                layui.layer.msg('bbb');//layer.closeAll();
            }
        });
    
    展开全文
  • 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 ...

    弹出层

    //源码 西郊 C:\Users\Administrator\Desktop\4.1test\views\business\user\agentEditcopy.html

    //放在table标签后面
    <script type="text/html" id="barTool">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>  //edit理解用来做事件的标记
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
     </script>
    //js
              layui.use('table', function() {
                var table = layui.table;
                //工具条事件
                table.on('tool(test)', function(obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
                    var data = obj.data; //获得当前行数据
                    objdata = data;
                    var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
    
                    switch (obj.event) {
                        case 'edit':
                            layer.open({
                                type: 2,
                                title: '编辑',
                                area: ['98%', '98%'],
                                content: ['./userEditcopy.html?status=0'], //要打开的页面的地址 再给他一个自定义状态
                                maxmin: true,
                                success: function(layero, index) {
                                    console.log(layero, index);
                                    console.log('layero, index');
                                }
                            })
                            break;
                        case 'del':
                            layer.confirm('真的删除行么', function(index) {
                                obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
                                layer.close(index);
                                //向服务端发送删除指令
                            });
                            break;
                    }
                });
            })
      
    //在 content: ['./userEditcopy.html?status=0']这个子页面
    	//先拿到父页面当前行的数据 注意一定是全局变量才能拿到
    	var data = parent.objdata;
    	//再回显数据到子页面
            $('document').ready(function() {
                //文本回显
                $('#id').val();
                //图片回显
                $("#id").attr("src", data.id);
                //下拉框选项回显 
            })
            
    

    审核操作

    //HTML
        <!-- 操作按钮 -->
        <div style="display: none" id="barTool">
            <!-- 审核 -->
            {{# if(d.checkStatus == 1){ }}
            <a permission="" class="layui-btn layui-btn-xs" lay-event="notice">审核</a> {{# }else{ }}
            <a permission="" class="layui-btn layui-btn-xs layui-btn-disabled">审核</a> {{# } }}
        </div>
             
    //js         
             //工具条事件
         table.on('tool(categories)', function(obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
                        var data = obj.data; //获得当前行数据
                        objdata = data;
                        var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
                        switch (obj.event) {
                            case 'edit':
                                layer.open({
                                    type: 2,
                                    title: '编辑',
                                    area: ['95%', '95%'],
                                    content: ['./goodsEdit.html'],
                                    maxmin: true,
                                    success: function(layero, index) {
                                        console.log(layero, index);
                                        console.log('layero, index');
                                    }
                                })
                                break;
                            case 'notice':
                                // 调用审核接口函数
                                //弹出审核的层
                                layer.confirm('通过审核吗?', {
                                    btn: ['通过', '不通过'] //可以无限个按钮
                                        ,
                                }, function(index, layero) {
                                    //按钮【按钮一】的回调
                                    //商品id
                                    console.log('data');
                                    console.log(data);
                                    var ditemId = data.ditemId;
                                    review(2, ditemId);
    
                                }, function(index) {
                                    //按钮【按钮二】的回调
                                    var ditemId = data.ditemId;
                                    review(3, ditemId);
                                });
    
                        }
                    });
    // 审核接口
            function review(checkStatus, itemId) {
                $.ajax({
                        url: http + '/adminItem/adminCheckItem',
                        data: {
                            checkStatus: checkStatus, //审核状态 2=审核通过 3=审核不通过
                            itemId: itemId, //商品id
                        },
                        success: function(res) {
                            console.log('res');
                            console.log(res);
                            // successService(res, null, null);
                            if (res.status == 'success') {
                                getData();
                            } else {
                                // successService(res, null, null);
                            }
    
                        }
                    })
                    // break;
            }
    
    展开全文
  • layui表单操作

    2019-08-23 11:18:03
    文章目录 表单初始赋值 监听select 表单初始赋值 语法:form.val('lay-filter的值', object); form.val("lay-filter", { ... top.layui.index.openTab({ title: name, url: data.value }); }); 个人博客 > 欢迎来访
  • form.on('submit(searchUnit)', function(params){ var treeElem = $('#treeList'), filterElem = $('[name="keyword"]');... } }) 大佬们,如果有前端对数据搜索的可以交流,查了好多只能对DOM 操作
  • layui下拉框操作

    千次阅读 2018-06-21 13:40:59
    --layui 获取下拉框动态加载数据##start--&gt; &lt;script type="text/javascript"&gt; $.get("{:url('admin/xxx/xxx')}",{ xxx:xxx, },function(data){ console.log(data); ...
  • table id="test-Table" lay-filter="test-Table" class="layui-table"></table> </div> js: var tableId = ‘test-Table’; table.render({ id: tableId, elem: ‘#test-Table’, url: _config.base...
  • layui Ajax请求完数据动态添加html后重新渲染domlayUI ajax加载html页面后渲染,关键在将html插到指定位置后重新调用element.init(); $.ajax({ url : url, type : 'GET', success : function(data) { $("#...
  • 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 表格简单操作

    2019-10-31 14:53:42
    ,element = layui.element, // 元素操作 $ = layui.$, // 这里要先声明变量,不然下面会报错 //执行一个 table 实例 table.render({ elem: '#demo' ,url: '/Get_params/returnjson' //数据接口 ,title: '...
  • LayUI

    2021-08-25 15:34:54
    LayUI 1、LaUI的安装及使用 1.1、LayUI的介绍 layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。 由国人开发,16年出厂的...
  • LayUItable动态表格分栏操作

    万次阅读 2021-08-12 14:09:52
    官方内容 //工具条事件 table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值" ... //获得当前行 tr 的 DOM 对象(如果有的话)
  • WEB_Day09(jQuery:操作属性、特殊属性操作、事件机制,Bootstrap,LayUI,拼图,XML,dom4j解析技术) jQuery操作属性 attr(name|properties|key,value|fn) 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一...
  • Layui

    2021-01-21 22:08:57
    Layui已经将jQuery最稳定的一个版本改为Layui的内部模块,当你去使用 layer 之类的模块时,它会首先判断你的页面是否已经引入了jQuery,如果没有,则加载内部的jQuery模块,如果有,则不会加载。 layui 的模块是基于...
  • layUI

    2020-12-04 17:09:17
    layUI layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。 https://www.layui.com/doc/ 将layUI全部路径导入项目(注意项目文件路径) ...
  • layui

    2019-08-11 11:41:39
    文章的主要简介 核心方法 各内置模块 核心方法 layui.define([mods], callback) 通过该方法可定义一个 Layui模块。参数mods是可选的,用于声明该模块所依赖的模块。callback即为模块加载...Layui的内置模块并...
  • 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下。 页面大概是酱紫的(我使用的AdminLTE和LayUI,AdminLTE用的是一个大神改的,链接...
  • Layui连接mysql操作CRUD案例

    千次阅读 2019-09-28 05:09:00
    今天分享的是一个新前端框架Layui,用它来链接数据库实现一下crud的操作。 一:layui简历  layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其...
  • layui当前页获取iframe页的DOM元素

    千次阅读 2019-07-22 15:20:43
    当你试图在当前页获取iframe页的DOM元素时,你可以用此方法 layer.open({ type: 2, content: 'test/iframe.html', success: function(layero, index){ var body = layer.getChildFrame('body', index); var ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,625
精华内容 650
关键字:

layui操作dom