layer,一款來自layui的強大彈出層外掛
阿新 • • 發佈:2018-12-13
前言
Layer一個讓你想到即可做到的Web彈窗/層的解決方案,layer是一款近年來備受青睞的web彈層元件,她具備全方位的解決方案,致力於服務各水平段的開發人員,您的頁面會輕鬆地擁有豐富友好的操作體驗。
使用方法
先給出官方文件地址(給出了大量的示例和參考程式碼):http://layer.layui.com/
輕鬆上手3步曲~~~
1.下載外掛
2.放置外掛
3.引用外掛
程式碼+演示
layer.alert();
layer.alert("這是一個alert彈出層!");
以上是一個很簡單的alert視窗,但我們可以對它的顯示介面進行自定義,比如這個視窗的標題,預設顯示的是“資訊”,如果我想修改它,可以這樣做。
layer.alert("這是一個alert彈出層!",{title:'這是一個新的標題'});
如果還不滿意,覺得介面不夠美觀,我們可以為內容加個表情標識。(0-6的可選效果自行體驗)
layer.alert("這是一個alert彈出層!",{title:'這是一個新的標題',icon:1});
layer.msg();
layer.msg("這是一個msg彈出層!");
這個彈出層較前面的彈出層更為簡約,沒有確定按鈕也沒有取消按鈕(實際上是可以自定義新增的,下面會演示),彈出層到達預設顯示時間自動銷燬,如果不想讓它銷燬一直顯示在頁面上,我們可以這麼做。
layer.msg("這是一個msg彈出層!",{time:0});
time屬性代表當前彈出層的銷燬時間,0代表永不銷燬,如上這樣,這個彈出層會一直顯示(除非你重新整理或關閉頁面),該屬性單位為毫秒。
除了可以自定義銷燬時間,那我能不能給他加個按鈕,主動讓這個彈出層去銷燬呢,答案是可以的。
layer.msg("這是一個msg彈出層!",{time:0,btn:['我知道了']});
我是否可以不通過按鈕去關閉它,給它的彈出層的右上角加個關閉?答案,也是可以的。
layer.msg("這是一個msg彈出層!",{time:0,closeBtn:true});
layer.confirm();
layer.confirm("我是程式設計師?",{btn:['當然是','我不是']});
顯然這樣做沒什麼意義,那我們是否可以增加點選按鈕後的函式呢,當然可以!
layer.confirm("我是程式設計師?", {
btn : [ '當然是', '我不是' ]
}, function() {
layer.msg('您選擇了當然是');
}, function() {
layer.msg('您選擇了不是');
});
layer.prompt();
layer.prompt({title:'請輸入您的年齡'},function(txt,index){
layer.close(index);
if(txt == 18){
layer.msg('您真的像花一樣!');
return;
}
layer.msg('原來你不是18歲!');
});
請注意回撥函式的使用,不再贅述。
layer.tips();
layer.tips('您發現了新大陸','.btn-primary');
layer.tab();
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '內容1'
}, {
title: 'TAB2',
content: '內容2'
}, {
title: 'TAB3',
content: '內容3'
}]
});
結束
篇幅有限,還有很多有意思的屬性引數沒有介紹,大家自己摸索,參照官方文件就行。