使用JavaScript實現(xiàn)改造layer彈層移動版組件
序
我們決定在自研的Craneoffice.net框架中,引入 layer彈出層移動版,無須引用 jquery,改造思路是用不同顏色的樣式表達不同的警告級別,另外通過一些代碼,解決不能嵌入或嵌入 iframe 不理想的問題。
添加了一個方法
添加了 layer.gt(type) 方法,該方法用于便捷的設(shè)置警告類型樣式,返回值為樣式字符串。
參數(shù)介紹
layer.gt('ok') 成功類型的提示樣式
layer.gt('error') 錯誤類型的提示樣式
layer.gt('info') 信息類型的提示樣式
layer.gt('alert') 警告類型的提示樣式
代碼示例
layer.open({ style: layer.gt('ok'), content: '歡迎使用云服務(wù)。這是改造版layer彈出框!', btn: ['Yes', 'no', 'Canel'], shadeClose: false, yes: function () { layer.open({ content: '點擊了 Yes 按鈕' , time: 2 , skin: 'msg' }); }, no: function () { layer.open({ content: '點擊了 No 按鈕' , time: 2 , skin: 'msg' }); }, cancel: function () { layer.open({ content: '點擊了 Canel 按鈕' , time: 2 , skin: 'msg' }); } });
給style屬性通過這個方法賦值就可以了。
嵌入iframe
代碼示例
var url = 'https://cn.bing.com/'; var ifr = document.createElement("div"); var iframepage = '<iframe src="' + url + '" frameborder="0" height="400" width="100%" >'; //height不要設(shè)置百分比 ifr.innerHTML = iframepage; layer.open({ style: layer.gt('ok'), type: 0, content: ifr.outerHTML, btn: '關(guān)閉', yes: function () { layer.closeAll(); } });
通過這段代碼可以正確顯示想要達到的效果,顯示如下圖:
可實現(xiàn)無邊距的嵌入iframe。
小結(jié)
這是我們引用的layer彈出層的早期組件,屬于移動版,針對其中的改造只是體現(xiàn)了自己的一些設(shè)計想法,希望大家批評指正。
到此這篇關(guān)于使用JavaScript實現(xiàn)改造layer彈層移動版組件的文章就介紹到這了,更多相關(guān)JavaScript改造layer組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
代碼觸發(fā)js事件(click、change)示例應(yīng)用
Chrome , Firfox 不支持fireEvent的方法可以使用dispatchEvent的方法替代,直接給一個兼容的Code,下面有個不錯的示例,喜歡的朋友可以收藏下2013-12-12在layui中對table中的數(shù)據(jù)進行判斷(0、1)轉(zhuǎn)換為提示信息的方法
今天小編就為大家分享一篇在layui中對table中的數(shù)據(jù)進行判斷(0、1)轉(zhuǎn)換為提示信息的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript學(xué)習(xí)總結(jié)(一) ECMAScript、BOM、DOM(核心、瀏覽器對象模型與文檔對象模型)
JavaScript是一種解釋執(zhí)行的腳本語言,是一種動態(tài)類型、弱類型、基于原型的語言,內(nèi)置支持類型,它遵循ECMAScript標準。它的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用于客戶端的腳本語言,主要用來給HTML增加動態(tài)功能2018-01-01用Javascript評估用戶輸入密碼的強度(Knockout版)
早上看到博友6點多發(fā)的一篇關(guān)于密碼強度的文章(連接),甚是感動(周末大早上還來發(fā)文)2011-11-11深入理解Javascript中的循環(huán)優(yōu)化
這篇文章介紹了Javascript中的循環(huán)優(yōu)化,有需要的朋友可以參考一下2013-11-11javascript currying返回函數(shù)的函數(shù)
currying函數(shù)是一種返回函數(shù)的函數(shù),是閉包最偉大的應(yīng)用之一。有關(guān)閉包更詳細的定義可參見這里與這里。如下currying函數(shù)的一種定義。2009-11-11SpringMVC返回json數(shù)據(jù)的三種方式
這篇文章主要介紹了SpringMVC返回json數(shù)據(jù)的三種方式的相關(guān)資料,需要的朋友可以參考下2015-12-12