通過檢視官方文件，記錄下筆記

僅作為自己學習資料使用
layer彈出層： 作為獨立元件使用直接引入js。引入jQuery1.8以上的任意版本。

基礎引數
type:
0（資訊框，預設）1（頁面層）2（iframe層）3（載入層）4（tips層）。

title - 標題:
型別：String/Array/Boolean，預設：‘資訊’
title: [‘文字’, ‘font-size:18px;’] 可以來改變標題樣式
不想顯示標題欄，可以title: false

content-內容
型別：String/DOM/Array，預設：’’"
layer.open({
type: 1,
content: ‘傳入任意的文字或html’ //這裡content是一個普通的String
});
…content: $(’#id’) //這裡content是一個DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對元素所影響
//Ajax獲取
$.post(‘url’, {}, function(str){
layer.open({
type: 1,
content: str //注意，如果str是object，那麼需要字元拼接。
});
});
iframe層
layer.open({
type: 2,
content: ‘

http://sentsin.com’ //這裡content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: [‘http://sentsin.com’, ‘no’]
});
tips層
layer.open({
type: 4,
content: [‘內容’, ‘#id’] //陣列第二項即吸附元素選擇器或者DOM
});

skin - 樣式類名
型別：String，預設：’’
目前layer內建的skin有：layui-layer-lanlayui-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;}

area - 寬高
定義寬度，area: ‘500px’
定義寬高，area: [‘500px’, ‘300px’]

offset - 座標
型別：String/Array，預設：垂直水平居中
值 備註
offset: ‘auto’ 預設座標，即垂直水平居中
offset: ‘100px’ 只定義top座標，水平保持居中
offset: [‘100px’, ‘50px’] 同時定義top、left座標
offset: ‘t’ 快捷設定頂部座標
offset: ‘r’ 快捷設定右邊緣座標
offset: ‘b’ 快捷設定底部座標
offset: ‘l’ 快捷設定左邊緣座標
offset: ‘lt’ 快捷設定左上角
offset: ‘lb’ 快捷設定左下角
offset: ‘rt’ 快捷設定右上角
offset: ‘rb’ 快捷設定右下角

*****************************************//todo
/*問題解決，顯示圖示0-6，是預設好的幾個圖示（應該可以去檔案裡替換圖片）
而load，則是另外的一套圖示，兩個動態圖*/

icon - 圖示。資訊框和載入層的私有引數
型別：Number，預設：-1（資訊框）/0（載入層）
資訊框預設不顯示圖示。當你想顯示圖示時，預設面板可以傳入0-6如果是載入層，可以傳入0-2。如：
//eg1
layer.alert(‘酷斃了’, {icon: 1});
//eg2
layer.msg(‘不開心。。’, {icon: 5});
//eg3
layer.load(1); //風格1的載入

---

btn - 按鈕
型別：String/Array，預設：‘確認’
btn: ‘我知道了’
btn: [‘yes’, ‘no’]
btn: [‘按鈕1’, ‘按鈕2’, ‘按鈕3’, …]
按鈕1的回撥是yes，而從按鈕2開始，則回撥為btn2: function(){}
//eg1 *******************************************todo

layer.confirm('納尼？', {
  btn: ['按鈕一', '按鈕二', '按鈕三'] //可以無限個按鈕
  ,btn3: function(index, layero){
    //按鈕【按鈕三】的回撥
  }
}, function(index, layero){
  //按鈕【按鈕一】的回撥
}, function(index){
  //按鈕【按鈕二】的回撥
});*******************************************
//eg2
layer.open({
  content: 'test'
  ,btn: ['按鈕一', '按鈕二', '按鈕三']
  ,yes: function(index, layero){
    //按鈕【按鈕一】的回撥
  }
  ,btn2: function(index, layero){
    //按鈕【按鈕二】的回撥
    //return false 開啟該程式碼可禁止點選該按鈕關閉
  }
 。。。
  ,cancel: function(){ 
    //右上角關閉回撥
    //return false 開啟該程式碼可禁止點選該按鈕關閉
  }
});

btnAlign - 按鈕排列
型別：String，預設：r
值 備註
btnAlign: ‘l’ 按鈕左對齊
btnAlign: ‘c’ 按鈕居中對齊
btnAlign: ‘r’ 按鈕右對齊。預設值，不用設定

closeBtn - 關閉按鈕
型別：String/Boolean，預設：1

layer提供了兩種風格的關閉按鈕，可通過配置1和2來展示，如果不顯示，則closeBtn: 0

shade - 遮罩
型別：String/Array/Boolean，預設：0.3
定義別的顏色，可以shade: [0.8, ‘#393D49’]；
不顯示遮罩，可以shade: 0

shadeClose - 是否點選遮罩關閉
型別：Boolean，預設：false

time - 自動關閉所需毫秒
型別：Number，預設：0

id - 用於控制彈層唯一標識
型別：String，預設：空字元
設定該值後，不管是什麼型別的層，都只允許同時彈出一個。
一般用於頁面層和iframe層模式

anim - 彈出動畫
型別：Number，預設：0
不想顯示動畫，設定 anim: -1
值 備註
anim: 0 平滑放大。預設
anim: 1 從上掉落
anim: 2 從最底部往上滑入
anim: 3 從左滑入
anim: 4 從左翻滾
anim: 5 漸顯
anim: 6 抖動

isOutAnim - 關閉動畫 （layer 3.0.3新增）
型別：Boolean，預設：true
不想開啟 isOutAnim: false

maxmin - 最大最小化。
型別：Boolean，預設：false
該引數值對type:1和type:2有效

fixed - 固定
型別：Boolean，預設：true

resize - 是否允許拉伸
型別：Boolean，預設：true
該引數對loading、tips層無效

resizing - 監聽視窗拉伸動作
型別：Function，預設：null
當你拖拽彈層右下角對窗體進行尺寸調整時，如果你設定了該回調，則會執行。
回撥返回一個引數：當前層的DOM物件
codelayui.code
resizing: function(layero){
console.log(layero);
}

scrollbar - 是否允許瀏覽器出現滾動條
型別：Boolean，預設：true

maxWidth - 最大寬度
型別：Number，預設：360
只有當area: 'auto’時，maxWidth的設定才有效

maxHeight - 最大高度
型別：Number，預設：無
請注意：只有當高度自適應時，maxHeight的設定才有效。

zIndex - 層疊順序
型別：，預設：19891014（賢心生日 0.0）
一般用於解決和其它元件的層疊衝突。

move - 觸發拖動的元素
型別：String/DOM/Boolean，預設：’.layui-layer-title’
預設是觸發標題區域拖拽。如果你想單獨定義，指向元素的選擇器或者DOM即可。
如move: ‘.mine-move’。你還配置設定move: false來禁止拖拽

moveOut - 是否允許拖拽到視窗外
型別：Boolean，預設：false
預設只能在視窗內拖拽，如果你想讓拖到窗外，那麼設定moveOut: true即可

moveEnd - 拖動完畢後的回撥方法
型別：Function，預設：null
預設不會觸發moveEnd，如果你需要，設定moveEnd: function(layero){}即可。
其中layero為當前層的DOM物件

tips - tips方向和顏色
型別：Number/Array，預設：2
tips層的私有引數。支援上右下左四個方向，通過1-4進行方向設定。
定義顏色，設定tips: [1, ‘#c00’]

tipsMore - 是否允許多個tips
型別：Boolean，預設：false

success - 層彈出後的成功回撥方法
型別：Function，預設：null
success會攜帶兩個引數，分別是當前層DOM當前層索引
layer.open({
content: ‘測試回撥’,
success: function(layero, index){
console.log(layero, index);
}
});

yes - 確定按鈕回撥方法
型別：Function，預設：null
該回調攜帶兩個引數，分別為當前層索引、當前層DOM物件

cancel - 右上角關閉按鈕觸發的回撥
型別：Function，預設：null
該回調攜帶兩個引數，分別為：當前層索引引數（index）、當前層的DOM物件（layero）
預設會自動觸發關閉。如果不想關閉，return false即可
cancel: function(index, layero){
if(confirm(‘確定要關閉麼’)){ //只有當點選confirm框的確定時，該層才會關閉
layer.close(index)
}
return false;
}

end - 層銷燬後觸發的回撥
型別：Function，預設：null
無論是確認還是取消，只要層被銷燬了，end都會執行，不攜帶任何引數。

full/min/restore -分別代表最大化、最小化、還原 後觸發的回撥
型別：Function，預設：null
攜帶一個引數，即當前層DOM

layer.config(options) - 初始化全域性配置
如果你是採用

layer.ready(callback) - 初始化就緒
由於我們的layer內建了輕量級載入器，所以你根本不需要單獨引入css等檔案。但是載入總是需要過程的。
當你在頁面一開啟就要執行彈層時，你最好是將彈層放入ready方法中，如：
codelayui.code
//頁面一開啟就執行彈層
layer.ready(function(){
layer.msg(‘很高興一開場就見到你’);
});

layer.open(options) - 原始核心方法
建立任何型別的彈層都會返回一個當前層索引
var index = layer.open({
content: ‘test’
});

layer.alert(content, options, yes) - 普通訊息框
內容，配置引數，回撥

layer.confirm(content, options, yes, cancel) - 詢問框

layer.msg(content, options, end) - 提示框

layer.load(icon, options) - 載入層
type:3的深度定製。
load預設是不會自動關閉的
//eg1
var index = layer.load();
//eg2
var index = layer.load(1); //換了種風格
//eg3
var index = layer.load(2, {time: 10*1000}); //又換了種風格，並且設定最長等待10秒
//關閉
layer.close(index);

layer.tips(content, follow, options) - tips層
在元素的事件回撥體中，follow直接賦予this即可

layer.close(index) - 關閉特定層
//如果你想關閉最新彈出的層，直接獲取layer.index即可
layer.close(layer.index);
//當你在iframe頁面關閉自身時
var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引
parent.layer.close(index); //再執行關閉
layer.closeAll(type) - 關閉所有層
layer.closeAll(); //瘋狂模式，關閉所有層
layer.closeAll(‘dialog’); //關閉資訊框
layer.closeAll(‘page’); //關閉所有頁面層
layer.closeAll(‘iframe’); //關閉所有的iframe層
layer.closeAll(‘loading’); //關閉載入層
layer.closeAll(‘tips’); //關閉所有的tips層

layer.style(index, cssStyle) - 重新定義層的樣式
該方法對loading層和tips層無效。
引數index為層的索引，cssStyle允許你傳入任意的css屬性
//重新給指定層設定width、top等
layer.style(index, {
width: ‘1000px’,
top: ‘10px’
});

layer.title(title, index) - 改變層的標題
使用方式：layer.title(‘標題變了’, index)

layer.getChildFrame(selector, index) - 獲取iframe頁的DOM
layer.open({
type: 2,
content: ‘test/iframe.html’,
success: function(layero, index){
var body = layer.getChildFrame(‘body’, index);
var iframeWin = window[layero.find(‘iframe’)[0][‘name’]]; //得到iframe頁的視窗物件，執行iframe頁的方法：iframeWin.method();
console.log(body.html()) //得到iframe頁的body內容
body.find(‘input’).val(‘Hi，我是從父頁來的’)
}
});

layer.getFrameIndex(windowName) - 獲取特定iframe層的索引

layer.iframeAuto(index) - 指定iframe層自適應
呼叫該方法時，iframe層的高度會重新進行適應

layer.iframeSrc(index, url) - //重置特定iframe url
似乎不怎麼常用的樣子。使用方式：layer.iframeSrc(index, ‘http://sentsin.com’)

layer.setTop(layero) -置頂當前視窗
layer.open({
type: 2,
shade: false,
area: ‘500px’,
maxmin: true,
content: ‘http://www.layui.com’,
zIndex: layer.zIndex, //重點1
success: function(layero){
layer.setTop(layero); //重點2
}
});

layer.full()、layer.min()、layer.restore() - 手工執行最大小化
一般用於在自定義元素上觸發最大化、最小化和全屏。

layer.prompt(options, yes) - 輸入層
formType: 1, //輸入框型別，支援0（文字）預設1（密碼）2（多行文字）
value: ‘’, //初始時的值，預設空字元
maxlength: 140, //可輸入文字的最大長度，預設500

layer.tab(options) - tab層
tab層只單獨定製了一個成員，即tab: []
layer.tab({
area: [‘600px’, ‘300px’],
tab: [{
title: ‘TAB1’,
content: ‘內容1’
}, {
title: ‘TAB2’,
content: ‘內容2’
}, {
title: ‘TAB3’,
content: ‘內容3’
}]
});

layer.photos(options) - 相簿層
相簿層，也可以稱之為圖片檢視器。
photos支援傳入json和直接讀取頁面圖片兩種方式。如果是json傳入，如下：

$.getJSON('/jquery/layer/test/photos.json', function(json){
  layer.photos({
    photos: json
    ,anim: 5 //0-6的選擇，指定彈出圖片動畫型別，預設隨機
  });
}); 
//而返回的json需嚴格按照如下格式：
{
  "title": "", //相簿標題
  "id": 123, //相簿id
  "start": 0, //初始顯示的圖片序號，預設0
  "data": [   //相簿包含的圖片，陣列格式
    {
      "alt": "圖片名",
      "pid": 666, //圖片id
      "src": "", //原圖地址
      "thumb": "" //縮圖地址
    }
  ]
}
如果是直接從頁面中獲取圖片，那麼需要指向圖片的父容器，
並且你的img可以設定一些規定的屬性（但不是必須的）。
codelayui.code
//HTML示例
<div id="layer-photos-demo" class="layer-photos-demo">
  <img layer-pid="圖片id，可以不寫" layer-src="大圖地址" src="縮圖" alt="圖片名">
  <img layer-pid="圖片id，可以不寫" layer-src="大圖地址" src="縮圖" alt="圖片名">
</div>

<script>
//呼叫示例
layer.photos({
  photos: '#layer-photos-demo'
  ,anim: 5 //0-6的選擇，指定彈出圖片動畫型別，預設隨機（請注意，3.0之前的版本用shift引數）
}); 
</script>

面板製作手冊
【第一步】：命名資料夾
在layer的skin目錄建立一個資料夾，假設您將該資料夾命名為：yourskin

【第二步】：建立樣式等檔案
在yourskin資料夾下建立一個單獨的樣式檔案，務必命名為：style.css。並且你可能用到的圖片也要存放在該資料夾下

【第三步】：書寫樣式
/*  
通過body字首，是為了確保你面板的優先順序
你可以通過除錯工具重置更多樣式 
*/
body .layer-ext-yourskin .layui-layer-title{}
body .layui-ext-yourskin .layui-layer-btn{}
body .layui-ext-yourskin .layui-layer-btn a{}

【第四步】：除錯
通過全域性配置看看你的面板定義的如何：
layer.config({
  extend: 'myskin/style.css', //載入您的擴充套件樣式
  skin: 'layer-ext-yourskin'
});
layer.alert('layer面板-Yourskin');

【最後一步】：釋出
1. 現在你已經成功製作了一個面板了，如果你覺得它很美，你可以共享出更多的人使用。
2. 那麼你應該製作一個簡單的頁面來介紹你的面板，提供儘可能簡單的使用說明（就像這個：layer.seaning.com）。
3. 然後將你的面板主題頁網址通過任意渠道發給賢心（比如可以通過郵箱：[email protected]）

1. 全域性配置
	layer.config({
	  extend: 'myskin/style.css', //載入新面板
	  skin: 'layer-ext-myskin' //一旦設定，所有彈層風格都採用此主題。
	});

2. 區域性使用
	layer.config({
	  extend: 'myskin/style.css' //同樣需要載入新面板
	});

//單個使用
	layer.open({
	  skin: 'layer-ext-myskin' //只對該層採用myskin面板
	});