快捷導(dǎo)航

使用JavaScript實(shí)現(xiàn)改造layer彈層移動(dòng)版組件

更新時(shí)間：2024年04月28日 09:17:07 作者：初九之潛龍勿用

這篇文章主要為大家詳細(xì)介紹了使用JavaScript實(shí)現(xiàn)改造layer彈層移動(dòng)版組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

序

我們決定在自研的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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: