內置方法

文章目錄

• 內置方法
• • • layer.config(options) - 初始化全局配置
    • layer.ready(callback) - 初始化就緒
    • layer.open(options) - 原始核心方法
    • layer.alert(content, options, yes) - 普通信息框
    • layer.confirm(content, options, yes, cancel) - 詢問框
    • layer.msg(content, options, end) - 提示框
    • layer.load(icon, options) - 加載層
    • layer.tips(content, follow, options) - tips層
    • layer.close(index) - 關閉特定層
    • layer.closeAll(type) - 關閉所有層
    • layer.style(index, cssStyle) - 重新定義層的樣式
    • layer.title(title, index) - 改變層的標題
    • layer.getChildFrame(selector, index) - 獲取iframe頁的DOM
    • layer.getFrameIndex(windowName) - 獲取特定iframe層的索引
    • layer.iframeAuto(index) - 指定iframe層自適應
    • layer.iframeSrc(index, url) - //重置特定iframe url
    • layer.setTop(layero) -置頂當前窗口

layer.config(options) - 初始化全局配置

/* 這是一個可以重要也可以不重要的方法，重要的是，它的權利真的很大，尤其是在模塊化加載layer時，你會發現你必須要用到它。它不僅可以配置一些諸如路徑、加載的模塊，甚至還可以決定整個彈層的默認參數。而說它不重要，是因為多數情況下，你會發現，你似乎不是那么十分需要它。但你真的需要認識一下這位伙計。 *///如果您是采用seajs或者requirejs加載layer，你需要執行該方法來完成初始化的配置。比如： layer.config({path: '/res/layer/' //layer.js所在的目錄，可以是絕對目錄，也可以是相對目錄 }); //這樣的話，layer就會去加載一些它所需要的配件，比如css等。 //當然，你即便不用seajs或者requirejs，也可以通過上述方式設定路徑 //如果你是采用<script src="?a.js&layer.js">這種合并的方式引入layer，那么您需要在script標簽上加一個自定義屬性merge="true"。如： <script src="?a.js&layer.js" merge="true"> 這樣的話，layer就不會去自動去獲取路徑，但你需要通過以下方式來完成初始化的配置 layer.config({path: '/res/layer/' //layer.js所在的目錄，可以是絕對目錄，也可以是相對目錄 });//如果采用 layui 加載 layer，無需設置 path。所以前置工作都是自動完成。//但layer.config的作用遠不止上述這樣。它還可以配置層默認的基礎參數，如： layer.config({anim: 1, //默認動畫風格skin: 'layui-layer-molv' //默認皮膚… }); //除此之外，extend還允許你加載拓展的css皮膚，如： layer.config({//如果是獨立版的layer，則將myskin存放在./skin目錄下//如果是layui中使用layer，則將myskin存放在./css/modules/layer目錄下extend: 'myskin/style.css' });

layer.ready(callback) - 初始化就緒

/* 由于我們的layer內置了輕量級加載器，所以你根本不需要單獨引入css等文件。但是加載總是需要過程的。當你在頁面一打開就要執行彈層時，你最好是將彈層放入ready方法中 */ //頁面一打開就執行彈層 layer.ready(function(){layer.msg('很高興一開場就見到你'); });

layer.open(options) - 原始核心方法

/* 基本上是露臉率最高的方法，不管是使用哪種方式創建層，都是走layer.open()，創建任何類型的彈層都會返回一個當前層索引 */ var index = layer.open({content: 'test' }); //拿到的index是一個重要的憑據，它是諸如layer.close(index)等方法的必傳參數。

layer.alert(content, options, yes) - 普通信息框

/* 它的彈出似乎顯得有些高調，一般用于對用戶造成比較強烈的關注，類似系統alert，但卻比alert更靈便。它的參數是自動向左補齊的。通過第二個參數，可以設定各種你所需要的基礎參數，但如果你不需要的話，直接寫回調即可 */ //eg1 layer.alert('只想簡單的提示'); //eg2 layer.alert('加了個圖標', {icon: 1}); //這時如果你也還想執行yes回調，可以放在第三個參數中。 //eg3 layer.alert('有了回調', function(index){//do something layer.close(index); });

layer.confirm(content, options, yes, cancel) - 詢問框

/* 類似系統confirm，但卻遠勝confirm，另外它不是和系統的confirm一樣阻塞你需要把交互的語句放在回調體中。同樣的，它的參數也是自動補齊的 */ //eg1 layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){//do somethinglayer.close(index); }); //eg2 layer.confirm('is not?', function(index){//do somethinglayer.close(index); });

layer.msg(content, options, end) - 提示框

/* 我們在源碼中用了相對較大的篇幅來定制了這個msg，目的是想將其打造成露臉率最高的提示框。而事實上我的確也在大量地使用它。因為它簡單，而且足夠得自覺，它不僅占據很少的面積，而且默認還會3秒后自動消失所有這一切都決定了我對msg的愛。因此我賦予了它許多可能在外形方面，它堅持簡陋的變化，在作用方面，它堅持零用戶操作。而且它的參數也是自動補齊的。 */ //eg1 layer.msg('只想弱弱提示'); //eg2 layer.msg('有表情地提示', {icon: 6}); //eg3 layer.msg('關閉后想做些什么', function(){//do something }); //eg layer.msg('同上', {icon: 1,time: 2000 //2秒關閉（如果不配置，默認是3秒） }, function(){//do something });

layer.load(icon, options) - 加載層

/* type:3的深度定制。load并不需要你傳太多的參數，但如果你不喜歡默認的加載風格，你還有選擇空間。icon支持傳入0-2如果是0，無需傳。另外特別注意一點：load默認是不會自動關閉的，因為你一般會在ajax回調體中關閉它 */ //eg1 var index = layer.load(); //eg2 var index = layer.load(1); //換了種風格 //eg3 var index = layer.load(2, {time: 10*1000}); //又換了種風格，并且設定最長等待10秒 //關閉 layer.close(index);

layer.tips(content, follow, options) - tips層

/* type:4的深度定制。也是我本人比較喜歡的一個層類型，因為它擁有和msg一樣的低調和自覺，而且會智能定位，即靈活地判斷它應該出現在哪邊。默認是在元素右邊彈出 */ //eg1 layer.tips('只想提示地精準些', '#id'); //eg 2 $('#id').on('click', function(){var that = this;layer.tips('只想提示地精準些', that); //在元素的事件回調體中，follow直接賦予this即可 }); //eg 3 layer.tips('在上面', '#id', {tips: 1 });

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內部動態遞增計算的//當你在iframe頁面關閉自身時 var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引 parent.layer.close(index); //再執行關閉

layer.closeAll(type) - 關閉所有層

/* 如果你很懶，你不想去獲取index你只想關閉。那么closeAll真的可以幫上你。如果你不指向層類型的話，它會銷毀掉當前頁所有的layer層。當然，如果你只想關閉某個類型的層，那么你可以 */ layer.closeAll(); //瘋狂模式，關閉所有層 layer.closeAll('dialog'); //關閉信息框 layer.closeAll('page'); //關閉所有頁面層 layer.closeAll('iframe'); //關閉所有的iframe層 layer.closeAll('loading'); //關閉加載層 layer.closeAll('tips'); //關閉所有的tips層

layer.style(index, cssStyle) - 重新定義層的樣式

/* 該方法對loading層和tips層無效。參數index為層的索引，cssStyle允許你傳入任意的css屬性 */ //重新給指定層設定width、top等 layer.style(index, {width: '1000px',top: '10px' });

layer.title(title, index) - 改變層的標題

layer.title('標題變了', index)

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頁的窗口對象，執行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); //再執行關閉

layer.iframeAuto(index) - 指定iframe層自適應

/* 調用該方法時，iframe層的高度會重新進行適應 */

layer.iframeSrc(index, url) - //重置特定iframe url

/* 似乎不怎么常用的樣子。使用方式： */ layer.iframeSrc(index, 'http://sentsin.com')

layer.setTop(layero) -置頂當前窗口

/* 非常強大的一個方法，雖然一般很少用。但是當你的頁面有很多很多layer窗口，你需要像Window窗體那樣，點擊某個窗口，該窗體就置頂在上面，那么setTop可以來輕松實現。它采用巧妙的邏輯，以使這種置頂的性能達到最優 */ //通過這種方式彈出的層，每當它被選擇，就會置頂。 layer.open({type: 2,shade: false,area: '500px',maxmin: true,content: 'http://www.layui.com',zIndex: layer.zIndex, //重點1success: function(layero){layer.setTop(layero); //重點2} });

總結

以上是生活随笔為你收集整理的layui的layer弹出层内置方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。