快速了解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内容的不同写法：

layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});

在这里我要提醒各位的是，在type为页面层的时候layer的内容是没有array这个分类的写法的。
2、接下来我们看看在type为2（iframe层）的时候，也就是关于页面层的引入content内容的不同写法：

// 如果是普通iframe层
layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
}); 

//若iframe层-父子操作
layer.open({
  type: 2,
  area: ['700px', '450px'],
  fixed: false, //不固定
  maxmin: true,
  content: 'test/iframe.html'
});

//若iframe层-多媒体
layer.open({
  type: 2,
  title: false,
  area: ['630px', '360px'],
  shade: 0.8,
  closeBtn: 0,
  shadeClose: true,
  content: '//player.youku.com/embed/XMjY3MzgzODg0'
});
layer.msg('点击任意处关闭');

//弹出即全屏
var index = layer.open({
  type: 2,
  content: 'http://layim.layui.com',
  area: ['320px', '195px'],
  maxmin: true
});
layer.full(index);

3、接下来我们看看在type为3（加载层）的时候，也就是关于页面层的引入content内容的不同写法：

    //加载层-默认风格
        layer.load();
        setTimeout(function(){
            layer.closeAll('loading');
        }, 2000);
    //加载层-风格2
        layer.load(1);
        setTimeout(function(){
            layer.closeAll('loading');
        }, 2000);
    //加载层-风格3
        layer.load(2);
        setTimeout(function(){
            layer.closeAll('loading');
        }, 2000);
    //加载层-风格4
        layer.msg('加载中', {
            icon: 16
            ,shade: 0.01
        });

4、接下来我们看看在type为4（tips层）的时候，也就是关于页面层的引入content内容的不同写法：

//tips层-上
layer.tips('上', '#id或者.class', {
  tips: [1, '#0FA6D8'] //还可配置颜色
  time: 4000
});
//tips层-右
layer.tips('默认就是向右的', '#id或者.class',{
    tips:[2, '#0FA6D8'],
    time:4000
});
//tips层-下
layer.tips('下', '#id或者.class', {
  tips: 3,
  time:4000
});
//tips层-左
layer.tips('左边么么哒', '#id或者.class', {
  tips: [4, '#78BA32']
});

在这里我要提醒大家的是tips方法属于内置方法，因为用的较多，一直用open方法的话，会写太多的代码，比较反锁，所以，简单的说就是把tips专门封装成了一个方法，写起来比较简练，当然若是想用公共方法open来写也是可以的，接下来看一下用open来写的一种写法：

layer.open({
            type: 4,
            content: ["我是tips","#id或者.class"],
            shade: 0,
            tips: [1, '#c00'],
            closeBtn: 0

  })

通过以上例子不难看出，tips里的1就是“上”，2就是“右”，3就是“下”，4就是“左”，切记没有0哦！

四、简单介绍一下layer里的其他基础参数

1、皮肤——skin

skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。目前layer内置的skin有：layui-layer-lanlayui-layer-molv

//内置的绿色
layer.open({
            type: 1,
            shade: 0.3,
            tips: 1,
            closeBtn: 1,
            skin:'layui-layer-molv'

 });
//内置的蓝色
layer.open({
            type: 1,
            shade: 0.3,
            tips: 1,
            closeBtn: 1,
            skin:'layui-layer-molv'

 });

以下是一个自定义风格的简单例子：

//单个使用
layer.open({
  skin: 'demo-class'
});
//全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高
layer.config({
  skin: 'demo-class'
})
//CSS 
body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
body .demo-class .layui-layer-btn a{background:#333;}
body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
…
加上body是为了保证优先级。你可以借助Chrome调试工具，定义更多样式控制层更多的区域。

 2、宽高——area

在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']。

3、offset默认情况下不用设置。但如果你不想垂直水平居中，你还可以进行以下赋值

 

4、图标——icon

信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。

//eg1，这里的icon可以传入0-6
layer.alert('酷毙了', {icon: 1});
//eg2，这里的icon可以传入0-6
layer.msg('不开心。。', {icon: 5});
//eg3，这里的icon可以传入0-2
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毫秒）

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