layui-layer独立组件-弹出层介绍

前端  /  管理员 发布于 5年前   402

【注意事项】

一、使用时，请把文件夹layer整个放置在您站点的任何一个目录，只需引入layer.js即可，除jQuery外，其它文件无需再引入。

二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您可以通过layer.config()来配置（详见官网API页）

三、jquery需1.8+

下载layer后，把它部署到你项目中的任何一个目录（当然，我们推荐放在前端相关目录里），你不能去挪动layer里面的文件结构，因为它们是不可拆散的组合。就像这样：(特别说明：需要把整个layer文件夹引入你的文件中，而不是单单引入layer.js文件)

1.jpg

你不必去管那些文件是干嘛的，你只需要认准一个文件：layer.js 没错，当你试图在页面呈现layer的时候，你应该这样去做：（最简单的示例）

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" type="text/css" href="css/layer.css"/>        <style type="text/css">            .btn{                width: 100%;                height: 50px;                line-height: 50px;                background: magenta;                text-align: center;                font-size: 15px;            }        </style>    </head>    <body>        <div class="btn">点我</div>        <!--你必须先引入jQuery1.8或以上版本-->        <script src="js/jquery-2.1.0.js"></script>        <script src="js/layer/layer.js"></script>        <script>            $(".btn").bind("click",function(){                layer.msg('点我的人最美！');            });        </script>    </body></html>
$("#btn").bind("click",function(){        //layer.msg('点我的人最美！');        layer.msg('此商品不存在或者已下架，看看其他商品吧！', {        time: 3000    });});

更多示例：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" type="text/css" href="css/layer.css"/>        <style type="text/css">            .btn:nth-child(odd){                width: 100%;                height: 50px;                line-height: 50px;                background: magenta;                text-align: center;                font-size: 15px;            }            .btn:nth-child(even){                width: 100%;                height: 50px;                line-height: 50px;                background: aqua;                text-align: center;                font-size: 15px;            }            #test5{                text-align: center;                width: 500px;                margin-left: 500px;            }        </style>    </head>    <body>        <div class="btn" id="btn">点我.btn</div>        <div class="btn" id="test2">点我test2</div>        <div class="btn" id="parentIframe">点我parentIframe</div>        <div class="btn" id="test4">点我test4</div>        <div class="btn" id="test5">点我test5</div>        <!--你必须先引入jQuery1.8或以上版本-->        <script src="js/jquery-2.1.0.js"></script>        <script src="js/layer/layer.js"></script>        <script>        $(function(){            $("#btn").bind("click",function(){                layer.msg('点我的人最美！');            });                        //弹出一个页面层            $('#test2').on('click', function(){              layer.open({              type: 1,              area: ['600px', '360px'],              shadeClose: true,   //点击遮罩关闭              content: '\<\div style="padding:20px;">自定义内容--添加自己需要的描述内容\<\/div>'              });            });                        //弹出一个iframe层            $('#parentIframe').on('click', function(){              layer.open({              type: 2,              title: 'iframe父子操作',              maxmin: true,              shadeClose: true, //点击遮罩关闭层              area : ['800px' , '520px'],              content: 'parentIframe.html'              });            });            //弹出一个loading层            $('#test4').on('click', function(){              var ii = layer.load();              //此处用setTimeout演示ajax的回调              setTimeout(function(){              layer.close(ii);              }, 1000);            });                        //弹出一个tips层            $('#test5').on('click', function(){              layer.tips('Hello tips!', '#test5');            });                    });        </script>    </body></html>
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" type="text/css" href="css/layer.css"/>        <style type="text/css">            .btn:nth-child(odd){                width: 100%;                height: 50px;                line-height: 50px;                background: magenta;                text-align: center;                font-size: 15px;            }            .btn:nth-child(even){                width: 100%;                height: 50px;                line-height: 50px;                background: aqua;                text-align: center;                font-size: 15px;            }            #test5{                text-align: center;                width: 100px;                margin-left: 100px;            }        </style>    </head>    <body>        <div class="btn" id="btn">点我.btn</div>        <div class="btn" id="test2">点我test2</div>        <div class="btn" id="parentIframe">点我parentIframe</div>        <div class="btn" id="test4">点我test4</div>        <div class="btn" id="test5">点我test5</div>                <div class="btn" id="test6">点我test6</div>        <div class="btn" id="test7">点我test7</div>        <div class="btn" id="test8">点我test8</div>        <div class="btn" id="test9">点我test9</div>                <!--你必须先引入jQuery1.8或以上版本-->        <script src="js/jquery-2.1.0.js"></script>        <script src="js/layer/layer.js"></script>        <script>        $(function(){            $("#btn").bind("click",function(){                layer.msg('点我的人最美！');            });                        //弹出一个页面层            $('#test2').on('click', function(){              layer.open({              type: 1,              area: ['600px', '360px'],              shadeClose: true,   //点击遮罩关闭              content: '\<\div style="padding:20px;">自定义内容--添加自己需要的描述内容\<\/div>'              });            });                        //弹出一个iframe层            $('#parentIframe').on('click', function(){              layer.open({              type: 2,              title: 'iframe父子操作',              maxmin: true,              shadeClose: true, //点击遮罩关闭层              area : ['800px' , '520px'],              content: 'parentIframe.html'              });            });            //弹出一个loading层            $('#test4').on('click', function(){              var ii = layer.load();              //此处用setTimeout演示ajax的回调              setTimeout(function(){                  layer.close(ii);              }, 1000);            });                        //弹出一个tips层            $('#test5').on('click', function(){              layer.tips('Hello tips!', '#test5');            });                        //======================================            //多窗口模式，层叠置顶            $('#test6').on('click', function(){                layer.open({                  type: 2 //此处以iframe举例                  ,title: '当你选择该窗体时，即会在最顶端'                  ,area: ['390px', '330px']                  ,shade: 0                  ,offset: [ //为了演示，随机坐标                    Math.random()*($(window).height()-300)                    ,Math.random()*($(window).width()-390)                  ]                  ,maxmin: true                  ,content: 'settop.html'                  ,btn: ['继续弹出', '全部关闭'] //只是为了演示                  ,yes: function(){                    $(that).click(); //此处只是为了演示，实际使用可以剔除                  }                  ,btn2: function(){                    layer.closeAll();                  }                                    ,zIndex: layer.zIndex //重点1                  ,success: function(layero){                    layer.setTop(layero); //重点2                  }                });            });                                                //配置一个透明的询问框            $('#test7').on('click', function(){                layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {                  time: 20000, //20s后自动关闭                  btn: ['明白了', '知道了', '哦']                });            });                                        //示范一个公告层            $('#test8').on('click', function(){                layer.open({                  type: 1                  ,title: false //不显示标题栏                  ,closeBtn: false                  ,area: '300px;'                  ,shade: 0.8                  ,id: 'LAY_layuipro' //设定一个id，防止重复弹出                  ,resize: false                  ,btn: ['火速围观', '残忍拒绝']                  ,btnAlign: 'c'                  ,moveType: 1 //拖拽模式，0或者1                  ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">内容<br>内容</div>'                  ,success: function(layero){                    var btn = layero.find('.layui-layer-btn');                    btn.find('.layui-layer-btn0').attr({                      href: 'http://www.layui.com/'                      ,target: '_blank'                    });                  }                });            });                         //边缘弹出            $('#test9').on('click', function(){                layer.open({                   type: 1                   ,offset: 'c' //具体配置参考：offset参数项(t、r、b、l、c)                   ,content: '<div style="padding: 20px 80px;">内容</div>'                   ,btn: '关闭全部'                   ,btnAlign: 'c' //按钮居中                   ,shade: 0 //不显示遮罩                   ,yes: function(){                       layer.closeAll();                  }                });            });        });        </script>    </body></html>

更多layui知识请关注layui使用教程栏目。

以上就是layui-layer独立组件-弹出层介绍的详细内容，更多请关注其它相关文章！


  • 上一条：
    layui上传文件与数据表格的一些问题
    下一条：
    layui封装模块教程

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客