关于layui-layer独立组件--弹出层
官方下载文档链接:http://layer.layui.com/
===============================================================================
【注意事项】
一、使用时,请把文件夹layer整个放置在您站点的任何一个目录,只需引入layer.js即可,除jQuery外,其它文件无需再引入。
二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径,您可以通过layer.config()来配置(详见官网API页)
三、jquery需1.8+
四、更多使用说明与演示,请参见layer官网。
=======================================================================================
快速上手文档:http://layer.layui.com/hello.html
下载layer后,把它部署到你项目中的任何一个目录(当然,我们推荐放在前端相关目录里),你不能去挪动layer里面的文件结构,因为它们是不可拆散的组合。就像这样:(特别说明:需要把整个layer文件夹引入你的文件中,而不是单单引入layer.js文件)
你不必去管那些文件是干嘛的,你只需要认准一个文件: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>
转载于:https://www.cnblogs.com/xiangru0921/p/6728234.html
总结
以上是生活随笔为你收集整理的关于layui-layer独立组件--弹出层的全部内容,希望文章能够帮你解决所遇到的问题。
- 上一篇: Docker aufs存储驱动layer
- 下一篇: Java基础小常识-继承-(10)