layui学习4（弹出组件）

1.弹出组件

使用方法

1.作为独立组件使用：下载layer引入js文件，加载1.8版本以上的jQuery的js文件和layer.js文件

2.layui模块化使用：只需要引入layui中的css与js文件，在script中使用layui.use()加载模块即可

下载layer组件：

layer 弹出层组件 - jQuery 弹出层插件 (ilayuis.com)

解压后找js文件和css文件拷入

layer-v3.5.1\layer

layer-v3.5.1\layer\theme\default

2.独立组件使用

下载layer引入js文件，加载1.8版本以上的jQuery的js文件和layer.js文件

引入组件使用

    <link rel="stylesheet" type="text/css" href="layer/layer.css">
    <script src="js/jquery-3.6.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript"></script>
    <script>
        layer.msg('hello');
    </script>

3.layui模块化使用

只需要引入layui中的css与js文件，在script中使用layui.use()加载模块即可

<!--  2.layui模块化使用-->
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>

<!--2.layui模块化使用-->
    <script type="text/javascript">
        layui.use('layer', function(){
            var layer = layui.layer;

            layer.msg('hello');
        });
    </script>

4.基础使用（通过layui模块化的形式）

4.1type - 基本层类型

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

这个弹出框是可以拖拽改变大小的

    <script type="text/javascript">
        layui.use('layer', function(){
            var layer = layui.layer;

            // layer.msg('hello');

            /*信息框*/
            layer.open({
                type:0,
                //系统标题
                // title:false, //不显示标题
                title:['标题','color:red;'],
                content:"Hello"

            });
        });
    </script>

<!--2.layui模块化使用-->
    <script type="text/javascript">
        layui.use('layer', function(){
            var layer = layui.layer;

            // layer.msg('hello');

            /*信息框*/
            /*
            layer.open({
                type:0,
                //系统标题
                // title:false, //不显示标题
                title:['标题','color:red;'],
                content:"Hello"
            });
            */


            /*页面层*/
            /*
            layer.open({
                type:1,
                title:"系统消息",
                content:"<div style='height: 100px;width: 200px'>Hello</div>"
            });
             */

            /*iframe*/
            /*
            layer.open({
                type:2,
                title:"系统信息",
                // content:'http://www.baidu.com'
                //如果不想出现滚动条，可以这样子写
                content:['http://www.baidu.com','no']
                //area:'500px'设置宽，高度自适应
                ,area:['800px','400px']//设置宽高
            });
             */

            /*tips层*/
            /*layer.open({
                type:4,
                //content:['内容','#id']  //数组第二项即吸附元素选择器或者DOM
                content:['内容','#sp3']
            });*/


        });
    </script>

4.2icon图标

            /*icon图标*/
            //eg1，可以传入0-6
            layer.alert('酷毙了', {icon: 1});
            //eg2，可以传入0-6
            layer.msg('不开心。。', {icon: 5});
            //eg3，可以传入0~2
            layer.load(1); //风格1的加载

加载

实现：先弹出框，点击确认弹出下一个弹出框，否则则关闭当前弹出框

layer.msg('你愿意和我做朋友吗',{
                time:0,//外面的消息框不会自动关闭
                btn:['当然愿意','狠心拒绝'],//按钮
                yes: function (index){//index是当前弹出框的下标
                    layer.close(index);//关闭当前弹出框
                    layer.msg('你好，新朋友',{
                        icon:6,//icon图标
                        btn:['开心','快乐']
                    });
                }
            });

想要关闭弹出层后会触发弹出效果：

//关闭弹出层会有效果
            layer.msg('玩命加载中...',function (){
                //关闭后的操作
                layer.msg('->-...');
            });

弹出.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出组件</title>
    <!--  1.引入组件使用  -->
<!--    <link rel="stylesheet" type="text/css" href="layer/layer.css">-->
<!--    <script src="js/jquery-3.6.1.js" type="text/javascript" charset="utf-8"></script>-->
<!--    <script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>-->

    <!--  2.layui模块化使用-->
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
    使用 方式：
     1.作为独立组件使用
        在layer独立版本官网下载组件包，在需要使用layer的页面加载1.6以上的jQuery的js文件和layer.js文件
    2.layui模块化使用
        只需要引入layui中的css与js文件，在script中使用layui.use()加载模块即可
-->

<span>内容1</span>
<span>内容2</span>
<span id="sp3">内容3</span>
<span id="sp4">内容4</span>


<!--1.作为独立组件使用-->
<!--    <script type="text/javascript"></script>-->
<!--    <script>-->
<!--        layer.msg('hello');-->
<!--    </script>-->

<!--2.layui模块化使用-->
    <script type="text/javascript">
        layui.use('layer', function(){
            var layer = layui.layer;

            // layer.msg('hello');

            /*信息框*/
            /*
            layer.open({
                type:0,
                //系统标题
                // title:false, //不显示标题
                title:['标题','color:red;'],
                content:"Hello"
            });
            */


            /*页面层*/
            /*
            layer.open({
                type:1,
                title:"系统消息",
                content:"<div style='height: 100px;width: 200px'>Hello</div>"
            });
             */

            /*iframe*/
            /*
            layer.open({
                type:2,
                title:"系统信息",
                // content:'http://www.baidu.com'
                //如果不想出现滚动条，可以这样子写
                content:['http://www.baidu.com','no']
                //area:'500px'设置宽，高度自适应
                ,area:['800px','400px']//设置宽高
            });
             */

            /*tips层*/
            /*layer.open({
                type:4,
                //content:['内容','#id']  //数组第二项即吸附元素选择器或者DOM
                content:['内容','#sp3']
            });*/

            /*icon图标*/
            //eg1，可以传入0-6
            // layer.alert('酷毙了', {icon: 1});
            //eg2，可以传入0-6
            // layer.msg('不开心。。', {icon: 5});
            //eg3，可以传入0~2
            // layer.load(1); //风格1的加载
            /*
            layer.msg('你愿意和我做朋友吗',{
                time:0,//外面的消息框不会自动关闭
                btn:['当然愿意','狠心拒绝'],//按钮
                yes: function (index){//index是当前弹出框的下标
                    layer.close(index);//关闭当前弹出框
                    layer.msg('你好，新朋友',{
                        icon:6,//icon图标
                        btn:['开心','快乐']
                    });
                }
            });*/
            //关闭弹出层会有效果
            layer.msg('玩命加载中...',function (){
                //关闭后的操作
                layer.msg('->-...');
            });



        });
    </script>
</body>
</html>

posted on 2023-04-23 23:00 201812 阅读(194) 评论(0) 编辑收藏举报

layui学习4（弹出组件）

1.弹出组件

2.独立组件使用

3.layui模块化使用

4.基础使用（通过layui模块化的形式）

4.1type - 基本层类型

4.2icon图标

弹出.html

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论