這兩天寫項目的時候用到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 中使用 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毫秒）

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

layui中layer的使用