精华内容
下载资源
问答
  • layui 打开新页面,并传入参数使用的 wangEditor 富文本编辑器不带预览的功能,所以自己实现了下功能;...涉及到需要把内容传递到...效果预览:具体代码实现为:创建一个 preview.html 预览页面,css 样式来自 wangEdi...

    layui 打开新页面,并传入参数

    使用的 wangEditor 富文本编辑器不带预览的功能,

    所以自己实现了下功能;

    思路是:

    点击打开一个弹窗 or 新页面,

    然后页面展示提交后前端页面看到的大概的样子。

    涉及到需要把内容传递到打开的 iframe 页面内,

    刚好可以利用 layui 携带传参的一个特点。

    效果预览:

    具体代码实现为:

    创建一个 preview.html 预览页面,css 样式来自 wangEditor 官方文档给出的

    预览内容

    /* table 样式 */

    table {

    border-top: 1px solid #ccc;

    border-left: 1px solid #ccc;

    }

    table td,

    table th {

    border-bottom: 1px solid #ccc;

    border-right: 1px solid #ccc;

    padding: 3px 5px;

    }

    table th {

    border-bottom: 2px solid #ccc;

    text-align: center;

    }

    /* blockquote 样式 */

    blockquote {

    display: block;

    border-left: 8px solid #d0e5f2;

    padding: 5px 10px;

    margin: 10px 0;

    line-height: 1.4;

    font-size: 100%;

    background-color: #f1f1f1;

    }

    /* code 样式 */

    code {

    display: inline-block;

    *display: inline;

    *zoom: 1;

    background-color: #f1f1f1;

    border-radius: 3px;

    padding: 3px 5px;

    margin: 0 3px;

    }

    pre code {

    display: block;

    }

    /* ul ol 样式 */

    ul, ol {

    margin: 10px 0 10px 20px;

    }

    点击事件代码:

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

    var $ = layui.jquery,

    layer = layui.layer,

    form = layui.form;

    ///预览

    $('#preview').on('click',function() {

    var w = ($(window).width() * 0.7);

    var h = ($(window).height() - 50);

    layer.open({

    resize: false,

    title: '预览',

    shadeClose: true,

    area: [w + 'px', h + 'px'],

    type: 2,

    content: '/common/html/preview.html',

    success: function (layero, index) {

    var body = layer.getChildFrame('body', index);

    body.find('#content').append(editor.txt.html());

    }

    });

    });

    });

    标签:layer,预览,传入,solid,layui,新页面,table,border

    来源: https://blog.csdn.net/xianhenyuan/article/details/95199044

    展开全文
  • Layui layer.open 打开的页面CSS样式异常

    千次阅读 2019-08-30 03:01:42
    Layui layer.open 打开的页面CSS样式异常 最近刚开始学前端,学的是layui 然后要实现一个按一个按钮在当前页面弹出一个资讯编辑框 然后呢,我在网上找了些模板,前端的大框架用的是LayuiCMS,内部内容页面的框架用...

    Layui layer.open 打开的页面CSS样式异常

    最近刚开始学前端,学的是layui

    然后要实现一个按一个按钮在当前页面弹出一个资讯编辑框

    在这里插入图片描述
    然后呢,我在网上找了些模板,前端的大框架用的是LayuiCMS,内部内容页面的框架用的是shiro-action的demo带的页面
    在按钮地方用layui.layer.open打开一个填充满内部的文章页面的时候出问题了:

    var index = layui.layer.open({
                    title : "添加文章",
                    type : 2,
                    content : "new/add",
                    success : function(layero, index){
                        var body = layui.layer.getChildFrame('body', index);
                        if(edit){
                            body.find(".newsName").val(edit.newsName);
                            body.find(".abstract").val(edit.abstract);
                            body.find(".thumbImg").attr("src",edit.newsImg);
                            body.find("#news_content").val(edit.content);
                            body.find(".newsStatus select").val(edit.newsStatus);
                            body.find(".openness input[name='openness'][title='"+edit.newsLook+"']").prop("checked","checked");
                            body.find(".newsTop input[name='newsTop']").prop("checked",edit.newsTop);
                            form.render();
                        }
                        setTimeout(function(){
                            layui.layer.tips('点击此处返回文章列表', '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                        },500)
                    }
                })
                layui.layer.full(index);
                //改变窗口大小时,重置弹窗的宽高,防止超出可视区域(如F12调出debug的操作)
                $(window).on("resize",function(){
                    layui.layer.full(index);
                })
    

    在这里插入图片描述
    变成了上面这样,
    说来我也是很搞。。。。
    大框架layuiCMS,用的shiro-action的页面,open的layuiCMS的文章编辑页面
    结果导致CSS混乱了,文章编辑页面出了问题

    这是文章编辑页面所需要的css:
    在这里插入图片描述
    研究了一会,看了下各个页面的css引入,network的文件下载,解决了:

    在这里插入图片描述
    我在文章列表这个大页面的引用里加入了open出来的文章编辑页面所需要的css,就可以了

    出现问题的大致猜想:

    • 可能< iframe >标签下的子页面不享受父页面的css
    • 可能layer.open出来的标签只吃创建它的父页面的css

    这里用了可能代表吾还没有研究过,留作后话,日后有时间了再去翻看

    展开全文
  • 方法一:全局修改应用样式(css中修改) //全局修改 在css增加样式 //如果有四个按钮 //class:.layui-layer-btn .layui-layer-btn0 //.layui-layer-btn .layui-layer-btn1 //以此类推 或者去网页查看class名字 ....

    方法一:全局修改应用样式(css中修改)

    //全局修改 在css增加样式
    //如果有四个按钮
    //class:.layui-layer-btn .layui-layer-btn0
    //.layui-layer-btn .layui-layer-btn1
    //以此类推  或者去网页查看class名字
    .layui-layer-btn .layui-layer-btn0{
    //css样式 现在网页中调节好再copy过来
    ....
    }
    .layui-layer-btn .layui-layer-btn1{
    }
    

    方法二:局部修改应用样式(每次渲染css样式)

    	//JS部分
    	//渲染方法
       function addIconforBtn() {
    	   debugger
    	   var btn1= $(".layui-layer-btn .layui-layer-btn0");
    	   var btn2  = $(".layui-layer-btn .layui-layer-btn1");
    	   var btn3= $(".layui-layer-btn .layui-layer-btn2");
    	   var btn4  = $(".layui-layer-btn .layui-layer-btn3");
    	   btn1.css({   
    		//css样式
          })
    	  btn1.css({   
    			//css样式
    			//"属性名":"属性值",
    			 "background-color":"#009688",	
    			 	
    	    })
          btn2.css({   
    		//css样式
          })
          btn3.css({   
    		//css样式
          })
          
      }       
    
    
    //HTML部分
    
    var index = layer.open({
        type: 2
        ,title: "弹出层标题"
        ,content: 'AlarmSafetyInfo.html'
        ,area: ['1100px', '600px']
        ,maxmin: true
        ,shade: 0
        ,btn: ['btn0','btn1','btn2','关闭']
        ,yes: function(index, layero){
            //按钮【按钮一】的回调
                    }
        ,btn2: function(index, layero){
            //按钮【按钮二】的回调
        }
        ,btn3: function(index, layero){
            //按钮【按钮三】的回调
        }
        ,btn4: function(index, layero){
            //按钮【按钮四】的回调
        }
    
        ,success: function(layero, index){
            debugger
            //渲染按钮的样式
            addIconforBtn();
        }
    })
    
    展开全文
  • Layer title样式修改问题使用LayUI开发过程中,发现无法修改layer弹出框(本文中主要这针对layer.open打开的弹出框)标题样式,网上提供的方法中大多为自己设计并添加新的skin,或者在单个页面(弹框的父页面)中添加...

    Layer title样式修改问题

    使用LayUI开发过程中,发现无法修改layer弹出框(本文中主要这针对layer.open打开的弹出框)标题样式,网上提供的方法中大多为自己设计并添加新的skin,或者在单个页面(弹框的父页面)中添加internal 或者external css去修改。

    先上源码,不同样式效果,节省时间。

    .div-block {

    top:200px;

    left:200px;

    position: absolute;

    }

    .btn-style {

    width:150px;

    }

    A

    B

    layui.use('layer', function(){

    var $ = layui.jquery, layer = layui.layer;

    $("#a").click(function(){

    layer.open({

    type:1,

    title:['点击A按钮触发','color:#fff;background-color:#01AAED;'], // 在这里修改的title样式

    content:'

    A按钮触发事件在此'

    });

    });

    $("#b").click(function(){

    layer.open({

    type:1,

    title:['点击B按钮触发','color:#fff;background-color:#FF5722;'], // 这里修改title样式

    content:'

    B按钮触发事件在此'

    });

    });

    });

    但是当一个页面中会有不同事件触发弹框效果想要显示的演示不同该如何如何处理并没有有效解决:

    例如:我有A、B两个弹框但是想要title效果不同

    e43775815209767154ab02c6a8ab5e6d.png

    分别点击A和B按钮时,

    6e8f68ca09a83b500a7c02c2484b99ca.png

    50d7799c08d8cc5ae083e79d230cda6d.png

    我们发现标题都是同样的格式,

    官方文档中提示

    通过官方提供文档我们发现文档中这样一句话:

    “需要自定义标题区域样式,那么你可以title: [‘文本’, ‘font-size:18px;’],数组第二项可以写任意css样式”

    也就是title中采用array方式书写有两部分,第一部分为文本,第二部分为css样式,且多个样式可以通过;隔开。该部分的css样式相当于修改了.layui-layer-title这个class的样式表。

    解决后

    利用此原理我们可以在单页面通过该方法对不同弹框设定css样式

    修改后的效果,

    854fcbfad16af1bcd87aabf9819409f0.png

    ff66a8db33d2d1e0f405a8f41317df1a.png

    其他思路

    如果弹出框使用iframe形式,

    1.可以在success中的function内获取class然后修改对应的样式

    2.在子层(弹出层)加载时触发父层css修改。

    展开全文
  • js var index = layer.open({ title: '----', skin: "layui-layer-molv", //主要代码 skin可自定义样式 type: 2, area: ['80%', '80%'], scrollbar: false, content: ".......",
  • layui中可以在layer.open方法中添加closeBtn :0样式来隐藏按钮。closeBtn - 关闭按钮类型:String/Boolean,默认:1layer提供了两种风格的关闭按钮,可通过配置1和2来展示,如果不显示,则closeBtn: 0示例:layui...
  • layer.open({ end: function () { navTab.reload(""); } }); 子页面: 在方法成功后的返回函数里比如ajax的success函数中加上 var index = parent.layer.getFrameIndex(window.name); parent.layer.close...
  • layui

    2020-05-07 14:55:08
    layui.open({ type: 0 (信息框) 1(页面框) 2(加载框), content:"", title: [‘标题’, ‘background-color: #eee;’] //第二个参数可以自定义标题的样式 , time :3 控制自动关闭层所需秒数, style: ‘border:...
  • layui弹出层基本样式

    千次阅读 2019-04-07 08:38:27
    function addmenu() { layer.open({ title: "添加目录", type: 2, content: "menuadd.html", area: ['50%', '70%'], skin: "layui-layer-molv", ...
  • layui-form+open+table

    2021-03-15 15:14:24
    重点在于把open的提交按钮变为与form表单内的提交按钮样式一样 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer...
  • 工作需要,经常用到layui ,经常会遇到对新增表单元素页面不显示样式的的坑,其实很简单,一个思路: 在你新增元素下面刷新一下表单就行:form.render();   比如说:layui.open({ }) ;  在后面增加 form....
  • Layui中layer弹出层右上角X关闭按钮样式修改 由于项目刚好用到layer弹出层,于是我使用了layer.open()做了一个页面层的弹出效果,但是在做的过程中我发现右上角的关闭按钮并不是自己想要的样式,于是对以下代码进行...
  • 问题:在弹框layer.open 中使用layui的form组件下的select 样式无法显示 解决方法: 在layer.open的success下添加代码form.render('select') addLabelmodel = layer.open({ type: 1, skin: 'layui-layer-rim...
  • Layui点击右上角“×”修改样式

    千次阅读 2019-11-14 17:01:16
    layer.open({ type: 1, title: '修改入库单', skin: 'layui-layer-molv', shadeClose: false, shade: 0.5, area: ['85%', '75%'], //anim: 1, content: $("#Edit_Add_ArticleStorage_Di...
  • layui 零散记录

    2018-09-20 19:30:36
    layer.open内容为表单时,没有样式处理方法 layer.open内容为表单时,没有样式处理方法 需求如下:通过layer弹出一个表单,弹出后表单没有样式,原因是没有使用layui.form渲染。 解决方式: layer.open({ ...
  • layui使用

    2019-12-10 14:23:41
    开关根据返回结果,决定样式是否改变 setTimeout(function(){ that.find("input:checkbox[name='open']").prop("checked",!that.find("input:checkbox[name='open']").prop("checked")); form...
  • var index=layer.open({ type: 2, //可传入的值有:Layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) title: ['添加产品', 'font-size:18px; color: #...
  • 一 layer.alert 效果图: 代码:   //取消提现 ... layer.alert('真的要取消吗', { skin: 'layui-layer-molv' //样式类名 自定义样式 ,closeBtn: 1 // 是否显示关闭按钮 ,anim: 1 //动画类型 ,...
  • 1.配置默认样式 参数 类型 说明 示例 on boolean 表头下拉中开启excel导出功能(默认:true) true filename string/function 导出excel文件名(默认:表格数据.xlsx),支持后缀:xlsx/xls<br> 也可...
  • 最后在定义弹出层的“layer.open()”方法的skin参数中调用css样式即可修改弹出层按钮颜色。本教程操作环境:Windows7系统、layui2.4版,该方法适用于所有品牌电脑。layui中设置弹出层按钮的方法:layer.open({skin: ...
  • Layui的弹出层

    2019-06-04 22:23:22
    1:先在HTML页面上放一个button按钮,给按钮ID,设置样式,按钮的作用就是弹出layuiopen层: <button|type=“button”|id="Open”|style=“width:100px;height:40px;margin:5% 50%;background:#7d19ce; ...
  • layer和layui的用法

    千次阅读 2017-04-04 16:38:33
    layer的话先引入jq1.8以上版本,然后引入layer文件,就可以去官网找想要的样式复制用了,layer:open之类的。 layui加载他的css文件就好,手机号,邮箱,身份证验证什么都有,复制过去就能用。导航栏也还能看。 ...
  • layer.open({type:1,title:"发送消息",skin:"myclass",//自定样式area:["800px","400px"],btn: [‘发送‘, ‘取消‘],btnAlign:‘c‘, //按钮居中content:$("#t"), //如果要form表单提交必须是$("#t") dom元素,不能...
  • layui中使用loading

    千次阅读 2019-11-25 17:11:06
    在上传文件中: 在before回调或者是choose回调中加入:layer....在xhr.open()之前就开始加入: layer.load(1) //load后的参数可以是空,也可以是0-2,代表的是不同的加载样式 在xhr.onload()中加入: layer.closeAll(‘...
  • 关于前端框架layui

    2018-05-16 19:24:14
    点击图片查看大图样式,代码范例:$('.qrcode').click(function(){ var src = $(this).find('img').attr('src');... layer.open({ type: 1, title: false, closeBtn: 1, shadeClose: true, ...
  • layui打开html并获取url参数内容

    千次阅读 2019-10-14 16:05:01
    layui打开html var url = "agent_add.... layer.open({ type: 2, skin: 'layui-layer-demo', //样式类名 title: '更新公告', closeBtn: 1, //不显示关闭按钮 anim: 2, area: [...

空空如也

空空如也

1 2 3
收藏数 59
精华内容 23
关键字:

layuiopen样式