亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解Layer彈出層樣式

 更新時間:2017年08月21日 08:52:27   作者:前程明亮  
學習layer彈出框,之前項目是用bootstrap模態(tài)框,后來改用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彈出層樣式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

相關文章

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

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

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

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

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

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

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

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

    這篇文章主要為大家詳細介紹了JS web調用攝像頭,截取視頻畫面,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    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ù)添加多個簽名后,依然需要添加相應的代碼來判斷并從不同的簽名參數(shù)列表中獲取對應的參數(shù),下文就來探索方法和技巧吧
    2022-04-04
  • js實現(xiàn)禁止中文輸入的方法

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

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

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

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

    typescript中聲明合并介紹

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

    Node調試工具JSHint的安裝及配置教程

    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

最新評論