layer
Posted OUYM
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了layer相关的知识，希望对你有一定的参考价值。
layer是一款近年来备受青睐的web弹层组件。
ayer采用MIT开源协议，将会永久性提供无偿服务。
文档：http://layer.layui.com/
配置
（1）获取layer
获取地址：http://layer.layui.com/
（2）配置部署
下载layer后，把它部署到你项目中的任何一个目录（当然，我们推荐放在前端相关目录里），你不能去挪动layer里面的文件结构，因为它们是不可拆散的组合。就像这样：
（3）页面引用
<!doctype html> <html> <head> <title>开始使用layer</title> </head> <body> <button id="test1">小小提示层</button> 你必须先引入jQuery1.8或以上版本 <script src="jQuery的路径"></script> <script src="layer.js的路径"></script> <script> $(\'#test1\').on(\'click\', function(){ layer.msg(\'Hello layer\'); }); </script> 当然，你也可以写在外部的js文件 </body> </html>
（4）使用
由于layer是基于jQuery，你可以选择用jQuery的api方式去抒写。当你想弹出一个layer实例的时候，你首先应该绑定事件，就像上面的那个例子。
父层demo.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layer-test</title> <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script> <script src="layer/layer.js"></script> <script> layer.ready(function(){ $("p").click(function(){ layer.open({ type: 2, title: \'test\', maxmin: true, area: [\'800px\', \'500px\'], content: \'form.html\', end: function(){ layer.tips(\'Hi\', \'#about\', {tips: 1}) } }); }) }); </script> </head> <body> <div> <p class="test1">test1</p> </div> </body> </html>
弹出层form.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form</title> </head> <body> <div> <form action="#"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="提交"> <input type="reset" value="取消"> </form> </div> </body> </html>
以上是关于layer的主要内容，如果未能解决你的问题，请参考以下文章