欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解Layer彈出層樣式

 更新時間:2017年08月21日 08:52:27   作者:前程明亮  
學(xué)習(xí)layer彈出框,之前項目是用bootstrap模態(tài)框,后來改用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)文章

  • JavaScript體驗異步更好的解決辦法

    JavaScript體驗異步更好的解決辦法

    本篇文章主要給大家講述了JavaScript體驗異步更好的解決辦法,有這方面需要的朋友跟著學(xué)習(xí)參考下吧。
    2018-01-01
  • 實例:盡可能寫友好的Javascript代碼

    實例:盡可能寫友好的Javascript代碼

    實例:盡可能寫友好的Javascript代碼...
    2006-10-10
  • js屏蔽鼠標(biāo)鍵盤(右鍵/Ctrl+N/Shift+F10/F11/F5刷新/退格鍵)

    js屏蔽鼠標(biāo)鍵盤(右鍵/Ctrl+N/Shift+F10/F11/F5刷新/退格鍵)

    屏蔽鼠標(biāo)右鍵、Ctrl+N、Shift+F10、F11、F5刷新、退格鍵/Alt+ 方向鍵 →等等,太多了就不一一寫來了感興趣的朋友可以了解下啊,希望本文對你有所幫助
    2013-01-01
  • js實現(xiàn)web調(diào)用攝像頭 js截取視頻畫面

    js實現(xiàn)web調(diào)用攝像頭 js截取視頻畫面

    這篇文章主要為大家詳細(xì)介紹了JS web調(diào)用攝像頭,截取視頻畫面,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-04-04
  • xtree.js 代碼

    xtree.js 代碼

    xtree.js 代碼...
    2007-03-03
  • TypeScript?使用?Tuple?Union?聲明函數(shù)重載

    TypeScript?使用?Tuple?Union?聲明函數(shù)重載

    這篇文章主要介紹了TypeScript?使用?Tuple?Union?聲明函數(shù)重載,TypeScript 中為函數(shù)添加多個簽名后,依然需要添加相應(yīng)的代碼來判斷并從不同的簽名參數(shù)列表中獲取對應(yīng)的參數(shù),下文就來探索方法和技巧吧
    2022-04-04
  • js實現(xiàn)禁止中文輸入的方法

    js實現(xiàn)禁止中文輸入的方法

    這篇文章主要介紹了js實現(xiàn)禁止中文輸入的方法,需要的朋友可以參考下
    2015-01-01
  • 基于JavaScript實現(xiàn)彈出框效果

    基于JavaScript實現(xiàn)彈出框效果

    彈出框在網(wǎng)站頁面中是必不可少的一部分,今天借助腳本之家平臺給大家分享使用js實現(xiàn)簡單的彈出框效果,感興趣的朋友一起學(xué)習(xí)吧
    2016-02-02
  • typescript中聲明合并介紹

    typescript中聲明合并介紹

    這篇文章主要介紹了typescript中聲明合并介紹,類型合并表明編譯器將合并兩個分開的并且名稱相同的聲明,合并之后的聲明擁有兩個聲明的特點,任意數(shù)量的聲明可以被合并,不僅限兩個,更多相關(guān)內(nèi)容需要的朋友可以參考下面文章內(nèi)容
    2022-09-09
  • Node調(diào)試工具JSHint的安裝及配置教程

    Node調(diào)試工具JSHint的安裝及配置教程

    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

最新評論