这两天写项目的时候用到layer，于是又把layui找出来看了看，layui确实是一个比较强大的前端框架，里面涵盖了很多的前端元素，而这对于前端的开发者来说是省了很大的麻烦，从一些页面元素到内置模块，都是采用了尽量少的代码来渲染页面，所以，我觉得自从用了layui就觉得对我的整个写项目过程中节省了不少时间。
今天就来说说关于layui里的layer的使用，主要提及的是pc端的用法，有时间再专门聊聊关于移动这一块的，其实应该都是大同小异。
layer说白了属于layui里的一个独立出来的弹层框架，但是由于近期layui在一直更新，所以现在的layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。
一、引用场景不同
1、 作为独立组件使用：
如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。
引入好layer.js后，直接用即可
<script src="layer.js"></script>
<script>
layer.msg('hello');
</script>
2、 layui 模块化使用：
如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js
在 layui 中使用 layer
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('hello');
});
二、layer提供了不同的类型
layer提供了5种层类型。可传入的值有：
0（信息框，默认）；
1（页面层）；
2（iframe层）；
3（加载层）；
4（tips层）。
若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）。
三、关于layer里的内容分类
layer里的内容分类有：String，DOM和Array，默认：''。当然，content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。
1、接下来我们看看在type为1（页面层）的时候，也就是关于页面层的引入content内容的不同写法：
1 layer.open({
2 type: 1,
3 content: '传入任意的文本或html' //这里content是一个普通的String
4 });
5 layer.open({
6 type: 1,
7 content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
8 });
9 //Ajax获取
10 $.post('url', {}, function(str){
11 layer.open({
12 type: 1,
13 content: str //注意，如果str是object，那么需要字符拼接。
14 });
15 });
在这里我要提醒各位的是，在type为页面层的时候layer的内容是没有array这个分类的写法的。
2、接下来我们看看在type为2（iframe层）的时候，也就是关于页面层的引入content内容的不同写法：
1 // 如果是普通iframe层
2 layer.open({
3 type: 2,
4 content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
5 });
6
7 //若iframe层-父子操作
8 layer.open({
9 type: 2,
10 area: ['700px', '450px'],
11 fixed: false, //不固定
12 maxmin: true,
13 content: 'test/iframe.html'
14 });
15
16 //若iframe层-多媒体
17 layer.open({
18 type: 2,
19 title: false,
20 area: ['630px', '360px'],
21 shade: 0.8,
22 closeBtn: 0,
23 shadeClose: true,
24 content: '//player.youku.com/embed/XMjY3MzgzODg0'
25 });
26 layer.msg('点击任意处关闭');
27
28 //弹出即全屏
29 var index = layer.open({
30 type: 2,
31 content: 'http://layim.layui.com',
32 area: ['320px', '195px'],
33 maxmin: true
34 });
35 layer.full(index);
3、接下来我们看看在type为3（加载层）的时候，也就是关于页面层的引入content内容的不同写法：
1 //加载层-默认风格
2 layer.load();
3 setTimeout(function(){
4 layer.closeAll('loading');
5 }, 2000);
6 //加载层-风格2
7 layer.load(1);
8 setTimeout(function(){
9 layer.closeAll('loading');
10 }, 2000);
11 //加载层-风格3
12 layer.load(2);
13 setTimeout(function(){
14 layer.closeAll('loading');
15 }, 2000);
16 //加载层-风格4
17 layer.msg('加载中', {
18 icon: 16
19 ,shade: 0.01
20 });
4、接下来我们看看在type为4（tips层）的时候，也就是关于页面层的引入content内容的不同写法：
1 //tips层-上
2 layer.tips('上', '#id或者.class', {
3 tips: [1, '#0FA6D8'] //还可配置颜色
4 time: 4000
5 });
6 //tips层-右
7 layer.tips('默认就是向右的', '#id或者.class',{
8 tips:[2, '#0FA6D8'],
9 time:4000
10 });
11 //tips层-下
12 layer.tips('下', '#id或者.class', {
13 tips: 3,
14 time:4000
15 });
16 //tips层-左
17 layer.tips('左边么么哒', '#id或者.class', {
18 tips: [4, '#78BA32']
19 });
在这里我要提醒大家的是tips方法属于内置方法，因为用的较多，一直用open方法的话，会写太多的代码，比较反锁，所以，简单的说就是把tips专门封装成了一个方法，写起来比较简练，当然若是想用公共方法open来写也是可以的，接下来看一下用open来写的一种写法：
1 layer.open({
2 type: 4,
3 content: ["我是tips","#id或者.class"],
4 shade: 0,
5 tips: [1, '#c00'],
6 closeBtn: 0
7
8 })
通过以上例子不难看出，tips里的1就是“上”，2就是“右”，3就是“下”，4就是“左”，切记没有0哦！
四、简单介绍一下layer里的其他基础参数
1、皮肤——skin
skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。目前layer内置的skin有：layui-layer-lanlayui-layer-molv
1 //内置的绿色
2 layer.open({
3 type: 1,
4 shade: 0.3,
5 tips: 1,
6 closeBtn: 1,
7 skin:'layui-layer-molv'
8
9 });
10 //内置的蓝色
11 layer.open({
12 type: 1,
13 shade: 0.3,
14 tips: 1,
15 closeBtn: 1,
16 skin:'layui-layer-molv'
17
18 });
以下是一个自定义风格的简单例子：
1 //单个使用
2 layer.open({
3 skin: 'demo-class'
4 });
5 //全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高
6 layer.config({
7 skin: 'demo-class'
8 })
9 //CSS
10 body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
11 body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
12 body .demo-class .layui-layer-btn a{background:#333;}
13 body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
14 …
15 加上body是为了保证优先级。你可以借助Chrome调试工具，定义更多样式控制层更多的区域。
2、宽高——area
在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']。
3、offset默认情况下不用设置。但如果你不想垂直水平居中，你还可以进行以下赋值
4、图标——icon
信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。
1 //eg1，这里的icon可以传入0-6
2 layer.alert('酷毙了', {icon: 1});
3 //eg2，这里的icon可以传入0-6
4 layer.msg('不开心。。', {icon: 5});
5 //eg3，这里的icon可以传入0-2
6 layer.load(1); //风格1的加载
5、关闭按钮——closeBtn
layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
6、遮罩层——shade
即弹层外区域。默认是0.3透明度的黑色背景（'#000'）。如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0；如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。
7、 自动关闭的时间——time
默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）
好了，常用的也就这些了，希望能对大家有帮助，当然也算是对我了解的一个巩固。
