«

【layui】前端悬浮框使用

时间:2022-11-24 15:10     作者:六度科技     分类: html


使⽤layer.open时content属性传值记录

这个是⼀个web弹层组件,挺好⽤的...然后项⽬框架是SSM...
layer.open主要是⽤来弹出来⼀个iframe弹窗,然后⽤来展⽰数据也⾏,⽤来修改也⾏,这次记录的主要是展⽰,展⽰我想要展⽰的数
据,我需要的页⾯...

layer.open({
     type: 1,
     title: '账户信息详情',
     shadeClose: true,
     shade: false,
     maxmin: true, //开启最⼤化最⼩化按钮
     area: ['893px', '600px'],
     content: xxxxxxxxx
});

其他的不看,单看content,因为content的内容就是需要展⽰的内容
第⼀种⽅法,很简单,我想要看⼀个已经存在的页⾯,⽐如说百度,或者项⽬中某个页⾯直接写地址

layer.open({
      type: 2,
      title: '很多时候,我们想最⼤化看,⽐如像这个页⾯。',
      shadeClose: true,
      shade: false,
      maxmin: true, //开启最⼤化最⼩化按钮
      area: ['893px', '600px'],
      content: 'http://fly.layui.com/'
    });
-----------------------------------------------------------------------
layer.open({
      type: 2,
      title: '⽤户信息。',
      shadeClose: true,
      shade: false,
      maxmin: true, //开启最⼤化最⼩化按钮
      area: ['893px', '600px'],
      content: '/test/user/info' + uid
    });

后⾯的uid可能是你需要传递的某些参数之类的...具体的根据你controller来定
第⼆种⽅法,将需要的内容写到页⾯上,然后在使⽤的时候调⽤
jsp页⾯:

<div id='info' style = "display : none">
我是内容
</div>

然后在js⾥⾯调⽤

layer.open({
           type: 1,
           title: '账户信息详情',
           shadeClose: true,
           shade: false,
           maxmin: true, //开启最⼤化最⼩化按钮
           area: ['893px', '600px'],
           content: $("#info").html()
});

第三种⽅法,直接在js⾥⾯拼接...好凶残...

var html = "<div class='wrapper' id='detailsinfo'>" +
           "<div class='detailsdiv'>" +
           "<p><label>帐号:</label>" + '测试帐号' +"</p>" +
           "</div></div>"
layer.open({
    type: 1,
    title: '账户信息详情',
    shadeClose: true,
    shade: false,
    maxmin: true, //开启最⼤化最⼩化按钮
    area: ['893px', '600px'],
    content: html
});

我现在使⽤的就是这三种⽅法,也许还有更好的⽅法,以后发现了再记录
对于⽅法⼀:因为是使⽤已经存在的controller和页⾯,所以传值什么都⽐较⽅便,需要什么值就获取什么值传递什么值...但是有些页⾯可能
我不想让别⼈通过url直接就访问到...那就可以⽤第⼆种和第三种...所需的数据直接通过ajax从后台获取到,然后再放到具体的位置,然后再
展⽰~~

layer.open的常用参数及例子

常用参数:

layer.open({
    // 基本层类型:0(信息框,默认)1(页面层)2(iframe层,也就是解析content)3(加载层)4(tips层)
    type: 1,
    title: "标题",
    // 当type: 2时就是url
    content: "内容/url",
    // 宽高:如果是100%就是满屏
    area: ['733px', '450px'],
    // 坐标:auto(默认坐标,即垂直水平居中),具体当文档:https://www.layui.com/doc/modules/layer.html#offset
    offset: 'auto',
    // 按钮:按钮1的回调是yes(也可以是btn1),而从按钮2开始,则回调为btn2: function(){},以此类推
    btn: ['按钮1', '按钮2'],
    // 关闭按钮:layer提供了两种风格的关闭按钮,可通过配置1和2来展示,如果不显示,则0
    closeBtn: 1,
    // 遮罩:默认:0.3透明度的黑色背景('#000')
    shade: 0.3,
    // 是否点击遮罩关闭:默认:false
    shadeClose: false,
    // 自动关闭所需毫秒:默认:0不会自动关闭
    time: 0,
    // 最大最小化:默认:false
    maxmin: false,
    // 固定:默认:true
    fixed: true,
    // 是否允许拉伸:默认:true
    resize: true,
    // 层叠顺序:默认:19891014,一般用于解决和其它组件的层叠冲突
    zIndex: 19891014,
    // 层弹出后的成功回调方法:layero前层DOM,index当前层索引
    success: function(layero, index){
    },
    // 第一个按钮事件,也可以叫btn1
    yes: function (index, layero) {
    },
    btn2: function (index, layero) {
        layer.close(index);
    },
    // 右上角关闭按钮触发的回调:默认会自动触发关闭。如果不想关闭,return false即可
    cancel: function(index, layero){
        if(layer.confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭
            layer.close(index);
        }
        return false;
    },
    // 层销毁后触发的回调:无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数。
    end: function(){
    },
    // 最大化后触发的回调:携带一个参数,即当前层DOM
    full: function(layero){
    },
    // 最小化后触发的回调:携带一个参数,即当前层DOM
    min: function(layero){
    },
    // 还原后触发的回调:携带一个参数,即当前层DOM
    restore: function(layero){
    },
});

例子:

layer.open({
    type: 1,
    title: "标题",
    content: "内容/url",
    area: ['733px', '450px'],
    offset: 'auto',
    btn: ['按钮1', '按钮2'],
    closeBtn: 1,
    shade: 0.3,
    shadeClose: false,
    time: 0,
    maxmin: false,
    fixed: true,
    resize: true
    zIndex: 19891014,
    success: function(layero, index){
    },
    yes: function (index, layero) {
    },
    btn2: function (index, layero) {
        layer.close(index);
    },
    cancel: function(index, layero){
            layer.close(index);
        }
        return false;
    },
    end: function(){
    },
    full: function(layero){
    },
    min: function(layero){
    },
    restore: function(layero){
    },
});

标签: 网页 前端