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