Layui-layer

最新推荐文章于 2023-07-10 23:47:44 发布

城陌者

最新推荐文章于 2023-07-10 23:47:44 发布

阅读量325

点赞数

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/lhc521zxd/article/details/131509249

版权

Layui2.7.6-layer-弹出层

1.常用基础参数

1.1 type - 弹出层类型

类型：Number，默认：0

layer提供了5种层类型。

0（信息框，默认）

1（页面层）【单页面开发最常用】

2（iframe层）

3（加载层）

4（tips层）。

若你采用*layer.open({type: 1})*方式调用，则type为必填项（信息框除外）

1.2 title - 标题

类型：String/Array/Boolean，默认：‘信息’

自定义样式，title: [‘文本’, ‘font-size:18px;text-align:center’]

不显示标题栏，title: false

1.3 content - 内容【实现单页面开发的关键】

类型：String/DOM/Array，默认：“”

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。

1.4 id - 用于控制弹层唯一标识

类型：String，默认：空字符

设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式,【用于关闭已弹出层】。

1.5 maxmin - 最大最小化

类型：Boolean，默认：false

该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可

1.6 success - 层弹出后的成功回调方法

类型：Function，默认：null

常用于编辑功能回调显示数据,success会携带两个参数，分别是当前层DOM与当前层索引。
layer.open({
 content: '测试回调',
 success: function(layero, index){
   console.log(layero, index);
 }
});  

1.7 yes - 确定按钮回调方法

类型：Function，默认：null

该回调携带两个参数，分别为当前层索引、当前层DOM对象。如：
layer.open({
 content: '测试回调',
 yes: function(index, layero){
   //do something
   layer.close(index); //如果设定了yes回调，需进行手工关闭
 }
});

1.8 cancel - 右上角关闭按钮触发的回调

类型：Function，默认：null

该回调携带两个参数，分别为：当前层索引参数（index）、当前层的DOM对象（layero），默认会自动触发关闭。如果不想关闭，return false即可，如:
cancel: function(index, layero){ 
 if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
   layer.close(index)
 }
 return false; 
}

2.内置方法

2.1 layer.open(options) - 原始核心方法【重要】

2.2 layer.alert(content, options, yes) - 普通信息框

2.3 layer.confirm(content, options, yes, cancel) - 询问框【重要】

2.4 layer.msg(content, options, end) - 提示框

2.5 layer.close(index) - 关闭指定层【重要】

2.6 layer.closeAll(type) - 关闭所有层【重要】

2,7 layer.setTop(layero) -置顶当前窗口

//通过这种方式弹出的层，每当它被选择，就会置顶。
layer.open({
       type: 2,
       shade: false,
         area: '500px',
         maxmin: true,
         content: 'http:/',
         zIndex: layer.zIndex, //重点1
         success: function(layero){
         layer.setTop(layero); //重点2
 	}
   });

3.其他内置层

3.1 layer.prompt(options, yes) - 输入层

3.2 layer.photos(options) - 相册层【图片查看器】

//HTML示例
<div id="layer-photos-demo" class="layer-photos-demo">
 <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
 <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
</div>

<script>
//调用示例
layer.photos({
 photos: '#layer-photos-demo'
 ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
}); 
</script>

4.使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹出层的使用</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/css/layui.css" integrity="sha512-SSF+OBDODWTSIqOivYBOyOKQ93PBDevipJEUEWtkUbTt4v34rmgPcCXcBMolxZIJcuobcdqmYJlonjUBEbOzNw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>

<body>

<span>hello layui</span>
用户名:<input type="text" value="用户名" name="username" />
密 码:<input type="password" value="123456" name="password" />
<div id="layer-photos-demo" class="layer-photos-demo">
    <img layer-pid="" layer-src="" src="http://www.layui.org.cn/res/upload/2017_3/168_1488985841996_23077.png" alt="图片名">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/layui.min.js" integrity="sha512-jVlfkkRyCyrICx3iFs80jgim5Vmg2xVjAdBRCw/E/ZukJPYpjXfTyyiB1Y1gRsBeAC8CJ+jYIk0teYL4qV85gA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    layui.use(['layer', 'jquery'], function () {
        var layer = layui.layer,
            $ = layui.jquery;
        //基本层类型type参数,0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
        layer.open({
            type: 1,
            //页面标题
            title: ["1-页面层", 'text-align:center'],
            //页面内容
            content: $("input[name='username']").val(),
            //设置页面宽高
            area: ['300px', '300px'],
            //页面层皮肤，可以传入自定义的class样式
            skin: '',
            //关闭按钮样式，取值为1,2,0为不显示
            closeBtn: 1,
            //页面背景透明度
            shade: 0.4,
            //是否点击遮罩关闭,取值为true|false
            shadeClose: false,
            //指定时间后自动关闭，单位为毫秒
            time: 50000,
            //设置弹出层的唯一ID
            id: 'layerId',
            //弹出动画,默认为0，可取值为:1、2、3、4、5、6
            anim: 0,
            //关闭动画,默认情况下，关闭层时会有一个过度动画,取值为true|false
            isOutAnim: true,
            //最大最小化
            maxmin: true,
            //固定,即鼠标滚动时，层是否固定在可视区域
            fixed: true,
            //是否允许拉伸,默认情况下，可以在弹层右下角拖动来拉伸尺寸
            resize: true,
            //监听窗口拉伸动作
            resizing: function () {
                layer.msg("窗口被拖动了");
            },
            //是否允许浏览器出现滚动条
            scollerbal: false,
            //层弹出后的成功回调方法,可以通过该参数实现回调,success会携带两个参数,分别是当前层DOM当前层索引
            success: function (layero, index) {
                console.log("弹出成功的回调");
                console.log(layero);
                console.log(index);
            },
            //确定按钮回调方法,该回调携带两个参数，分别为当前层索引、当前层DOM对象。
            yes: function (index, layero) {
                layer.close(index);
            },
            // 右上角关闭按钮触发的回调,默认会自动触发关闭。如果不想关闭，return false即可
            cancel: (index, layero)=>{
                console.log("关闭弹窗回调函数");
                console.log(index);
                console.log(layero);
                if (confirm("确定关闭吗?")) {
                    layer.close(index);
                }
                return false;
            }
        });
        //相册层,也叫图片查看器。
        layer.photos({
            photos: '#layer-photos-demo',
            anim: 5
        })
    })
</script>
</body>

</html>