快速了解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毫秒）

 好了，常用的也就這些了，希望能對大家有幫助，當然也算是對我了解的一個鞏固。