詳解Layer彈出層樣式
前言:學習layer彈出框,之前項目是用bootstrap模態(tài)框,后來改用layer彈出框,在文章的后面,我會分享項目的一些代碼(我自己寫的)。
layer至今仍作為layui的代表作,她的受眾廣泛并非偶然,而是這五年多的堅持,不斷完善和維護、不斷建設和提升社區(qū)服務,使得猿們紛紛自發(fā)傳播,乃至于成為今天的Layui最強勁的源動力。目前,layer已成為國內最多人使用的web彈層組件,GitHub自然Stars3000+,官網累計下載量達30w+,大概有20萬Web平臺正在使用layer。 具體請移步layer官網,http://www.layui.com/doc/modules/layer.html
這篇博客會引用官網的一些內容,主要是寫寫layer的一些難點。比如如何用layer打開一個新的網頁,content直接為一個網址就可以了,但是在你的項目中,這個網址又是啥??HTML的直接路徑? 相對路徑??都不是!! layer如何獲取父界面的元素,比如我點擊新增按鈕,在layer框編輯后提交,是如何關閉當前l(fā)ayer框,額,關閉layer框很簡單,但是如何關閉后根據父界面的form表單向后臺發(fā)起Ajax請求,,刷新信息。即:layer子界面如何調用父界面的方法。
如果你不想使用Layui,而只是想使用layer,你可以去layer獨立組件官網下載組件包。你需要在你的頁面引入jQuery1.8以上的任意版本,并引入layer.js。
<script src="jQuery的路徑"></script>
<script src="layer.js的路徑"></script>
<script>
//彈出一個頁面層
$('#test2').on('click', function(){
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //點擊遮罩關閉
content: '\<\div style="padding:20px;">自定義內容\<\/div>'
});
});
</script>
title - 標題
類型:String/Array/Boolean,默認:'信息'
title支持三種類型的值,若你傳入的是普通的字符串,如title :'我是標題',那么只會改變標題文本;若你還需要自定義標題區(qū)域樣式,那么你可以title: ['文本', 'font-size:18px;'],數(shù)組第二項可以寫任意css樣式;如果你不想顯示標題欄,你可以title: false
content - 內容
類型:String/DOM/Array,默認:''
content可傳入的值是靈活多變的,不僅可以傳入普通的html內容,還可以指定DOM,更可以隨著type的不同而不同。譬如:
/!*
如果是頁面層
*/
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,那么需要字符拼接。
});
});
/!*
如果是iframe層
*/
layer.open({
type: 2,
content: 'http://sentsin.com' //這里content是一個URL,如果你不想讓iframe出現(xiàn)滾動條,你還可以content: ['http://sentsin.com', 'no']
});
/!*
如果是用layer.open執(zhí)行tips層
*/
layer.open({
type: 4,
content: ['內容', '#id'] //數(shù)組第二項即吸附元素選擇器或者DOM
});
btn - 按鈕
類型:String/Array,默認:'確認'
信息框模式時,btn默認是一個確認按鈕,其它層類型則默認不顯示,加載層和tips層則無效。當您只想自定義一個按鈕時,你可以btn: '我知道了',當你要定義兩個按鈕時,你可以btn: ['yes', 'no']。當然,你也可以定義更多按鈕,比如:btn: ['按鈕1', '按鈕2', '按鈕3', …],按鈕1的回調是yes,而從按鈕2開始,則回調為btn2: function(){},以此類推。如:
//eg1
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 開啟該代碼可禁止點擊該按鈕關閉
}
,btn3: function(index, layero){
//按鈕【按鈕三】的回調
//return false 開啟該代碼可禁止點擊該按鈕關閉
}
,cancel: function(){
//右上角關閉回調
//return false 開啟該代碼可禁止點擊該按鈕關閉
}
});
success - 層彈出后的成功回調方法
類型:Function,默認:null
當你需要在層創(chuàng)建完畢時即執(zhí)行一些語句,可以通過該回調。success會攜帶兩個參數(shù),分別是當前層DOM當前層索引。如:
layer.open({
content: '測試回調',
success: function(layero, index){
console.log(layero, index);
}
});
yes -確定按鈕回調方法
類型:Function,默認:null
該回調攜帶兩個參數(shù),分別為當前層索引、當前層DOM對象。如:
layer.open({
content: '測試回調',
yes: function(index, layero){
//do something
layer.close(index); //如果設定了yes回調,需進行手工關閉
}
});
cancel - 右上角關閉按鈕觸發(fā)的回調
類型:Function,默認:null
該回調攜帶兩個參數(shù),分別為:當前層索引參數(shù)(index)、當前層的DOM對象(layero),默認會自動觸發(fā)關閉。如果不想關閉,return false即可,如;
cancel: function(index, layero){
if(confirm('確定要關閉么')){ //只有當點擊confirm框的確定時,該層才會關閉
layer.close(index)
}
return false;
}
end - 層銷毀后觸發(fā)的回調
類型:Function,默認:null
無論是確認還是取消,只要層被銷毀了,end都會執(zhí)行,不攜帶任何參數(shù)。
layer.ready(callback) - 初始化就緒
由于我們的layer內置了輕量級加載器,所以你根本不需要單獨引入css等文件。但是加載總是需要過程的。當你在頁面一打開就要執(zhí)行彈層時,你最好是將彈層放入ready方法中,如:
//頁面一打開就執(zhí)行彈層
layer.ready(function(){
layer.msg('很高興一開場就見到你');
});
layer.close(index) - 關閉特定層(比較重要)
關于它似乎沒有太多介紹的必要,唯一讓你疑惑的,可能就是這個index了吧。事實上它非常容易得到。
//當你想關閉當前頁的某個層時 var index = layer.open(); var index = layer.alert(); var index = layer.load(); var index = layer.tips(); //正如你看到的,每一種彈層調用方式,都會返回一個index layer.close(index); //此時你只需要把獲得的index,輕輕地賦予layer.close即可 //如果你想關閉最新彈出的層,直接獲取layer.index即可 layer.close(layer.index); //它獲取的始終是最新彈出的某個層,值是由layer內部動態(tài)遞增計算的 //當你在iframe頁面關閉自身時 var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引 parent.layer.close(index); //再執(zhí)行關閉 layer.getChildFrame(selector, index) - 獲取iframe頁的DOM
當你試圖在當前頁獲取iframe頁的DOM元素時,你可以用此方法。selector即iframe頁的選擇器
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頁的窗口對象,執(zhí)行iframe頁的方法:iframeWin.method();
console.log(body.html()) //得到iframe頁的body內容
body.find('input').val('Hi,我是從父頁來的')
}
});
layer.getFrameIndex(windowName) - 獲取特定iframe層的索引
此方法一般用于在iframe頁關閉自身時用到。
//假設這是iframe頁 var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引 parent.layer.close(index); //再執(zhí)行關閉
封裝好的Layer彈出框與關閉layer彈出框的方法(代碼周一給出, 現(xiàn)在手頭沒有代碼)
總結
以上所述是小編給大家介紹的詳解Layer彈出層樣式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
js屏蔽鼠標鍵盤(右鍵/Ctrl+N/Shift+F10/F11/F5刷新/退格鍵)
屏蔽鼠標右鍵、Ctrl+N、Shift+F10、F11、F5刷新、退格鍵/Alt+ 方向鍵 →等等,太多了就不一一寫來了感興趣的朋友可以了解下啊,希望本文對你有所幫助2013-01-01
TypeScript?使用?Tuple?Union?聲明函數(shù)重載
這篇文章主要介紹了TypeScript?使用?Tuple?Union?聲明函數(shù)重載,TypeScript 中為函數(shù)添加多個簽名后,依然需要添加相應的代碼來判斷并從不同的簽名參數(shù)列表中獲取對應的參數(shù),下文就來探索方法和技巧吧2022-04-04
Node的優(yōu)勢我就不再亂吹捧了,它讓javascript統(tǒng)一web的前后臺成為了可能。但是對于新手來說,server端的JS代碼可能不像client端的代碼那么好調試,直觀。client端JS代碼的調試基本上經歷了一個從“肉眼--alert()--firebug(或者其它的developer tools)”的一個過程。而對于server端的調試,可能新手仍然停留在使用“肉眼--console()”的階段。其實,Node經過了這么多年(雖然才短短幾年)的發(fā)展,也有了很多不錯的第三方的調試工具。包括Node內建的調試工具debugger、node-inspector等。2014-05-05

