layui(二)——layer組件常見用法總結

layer是layui的代表作，功能十分強大，為方便以后快速配置這里對其常見用法做了簡單總結

一、常用調用方式

            //1.普通消息：alert(content,[options],[yesCallBack])
            layer.alert('hello', { icon: 1 }, function (index) { console.log('點擊確定按鈕，執行這里')//點擊彈窗的確定按鈕，執行回調
 }) //2.詢問：confirm(content,[options],[yesCallBack])
            layer.confirm('are you sure?', { icon: 2, title: '確定嗎' }, function (index) { console.log('點擊確定按鈕，執行這里');//點擊確定按鈕，執行回調
 layer.close(index); }) //3.提示：msg（content,[options],[endCallBack]）
            layer.msg('提示你一下', { icon: 6 }, function (index) { console.log('關閉時執行這里') }) //4.精確提示：tips(content,element,options)
            layer.tips('提示的精確點', '#test',{ tips: 2 }) //1,2,3,4-->上右下左

二、基礎參數配置

　　所有的創建層都執行open方法，open方法返回一個number

　　layer.open({ type: 1                   //0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）
, title: '我是標題'          //標題。①false表示無標題 ②['text','css']帶樣式的標題
, content: '我是內容'        //內容。①可為$('selector')或者html
, time: 5000 //自動關閉。5s后關閉
, id: '01'                  //設置id后，只能同時彈出一個，默認為''

//***********************按鈕
, btn: ['按鈕1', '按鈕2', '按鈕3'] , yes: function (index, layero) { console.log('點了按鈕1');layer.close(index) } //默認不關閉
, btn2: function (index, layero) { console.log('點了按鈕2'); return false; }    //點擊后不關閉
, btn3: function (index, layero) { console.log('點了按鈕3'); }                  //點擊后關閉
, btnAlign: 'r'     //btn的位置 'l':居左，'c':居中
, closeBtn: 1       //關閉按鈕，0表示不顯示
, cancel: function (index, layero) { 　if (confirm('確定關閉嗎？')) { 　　　　　　layer.close(index); 　　　　　　} return false;} , maxmin: true      //最大最小化

//**********************位置和大小
, area: '500px'           //寬高，寬500。['500px',300px]表示高度為300px
, offset: '300px'         //坐標，top300。['300px','50px']表示top300,left50
, fixed: true             //固定。鼠標滾動時，固定在可視區
, resize: true            //可拉伸。
, zindex: 666             //層級
　　
//***********************動畫和樣式
, anim: 0                 //0:放大，1：下滑，2:上升，3：左滑，4：右滑，5:漸顯，6：抖動
, skin: 'mycss'           //內容樣式。mycss是自定義的css樣式
})

三、關閉彈窗

　　使用layer.close方法可以進行關閉彈窗，參數是layer.open方法返回的窗體編號（number類型）

　　　　var index = layer.open({ type: 1, title: '提示', content: '你好' });
　　　　layer.close(index);

　　當彈窗為iframe時，我們怎么在iframe中關閉自己呢

 layer.open({ type: 2,                         //彈窗為iframe,
            content: 'http://www.xxxx.com'   //如果不想讓iframe出現滾動條，可以設置content: ['url', 'no']
 }); //假設這是iframe中，執行下邊代碼在iframe中關閉自己
       var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引
       parent.layer.close(index);                           //再執行關閉  

 

注:這是為了個人查找方便整理的文檔，並沒有總結完全，查看更多可訪問官網http://www.layui.com/doc