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