快速了解layui中layer的使用

　　这两天写项目的时候用到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毫秒）

好了，常用的也就这些了，希望能对大家有帮助，当然也算是对我了解的一个巩固。