引言
通过本节学习,您将收获以下知识点:
1, layer是什么!
2, 如何引入layer!
3, 如何使用layer!
我们结合实际操作,通过一个简单的案例,让您切实感受到:layer的学习既有趣又简单!
和我一起开启layer之门吧!!!
特别提示:文末有本节对应的源码哦 ^_^
第一个问题:layer是什么?
Layer是一款可以独立使用的、依赖于jauery的弹出层插件!
当然layer也可以作为layui的一个模块,但我们所使用的案例,均使用独立的layer插件来完成!
第二个问题:在哪儿下载?
Layer独立插件的官网是:http://layer.layui.com
Layer插件的手册网址是:https://www.layui.com/doc/modules/layer.html
第三个问题:我们究竟下载了什么东西?
在这里,我们下载的是layer-v3.0.3.zip压缩包!
解压之后的layer-v3.0.3目录结构是:
其中我们用到的只有layer文件夹及其子文件!
说明:需要说明的是 layer目录下面的目录结构请不要随意改动,尽量保持原目录结构!
主目录layer的目录结构是:
其中layer.js就是我们要引入的js文件,其余的文件不需要我们管。
第四个问题:如何使用?
1,准备工作:
(1,搭建工作目录!
a, 在桌面或者硬盘任意位置新建文件夹 demo;
b, 在 demo目录下新建三个文件夹:
Js //存放所有的javascript文件
Css //存放所有的css文件
Images //存放所有的图片文件
(2,准备插件文件!
a, 将layer目录复制到demo/js目录下面
b, 下载jauery2.1.4.js放到demo/js目录下面
最终形成的目录结构是:
2, 使用layer编写第一个弹框!
(1,在demo文件夹下新建文件 index.html;
(2,在index.html中引入jquery2.1.4.js文件;
(3,在index.html中引入layer.js文件;
(4,使用layer的内置msg方法制作第一个简单的弹层信息框!
最终编写好的index.html文件:
//(4, 使用layer的内置msg方法制作第一个简单的弹层信息框! layer.msg("你好, layer");
最终运行效果:
最后总结:
1, layer是依赖于jquery的,一定要在jquery之后引入!
2, layer的整体结构尽量不要改动!
3, layer的使用很简单!
本案例代码地址:http://pan.baidu.com/s/1o84pfq6密码: brqq
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。