首頁 >web前端 >H5教程 >前端框架-彈跳窗的研究

前端框架-彈跳窗的研究

大家讲道理原創: 2017-07-15 11:52:272848瀏覽

在電力公司工作已有兩年，開發的各個應用程式都是基於H5應用。而H5引用中又基於cordova.js 庫來開發，各個外包公司接了應用，都是一頭霧水，不曉得怎麼開發，這篇文章主要是講解使用基於seajs庫和Bootstrap框架來搭建的一套前端通用框架。

前端架構主要研究了四點

1、 研究Web框架的動態載入技術

##針對行動互聯網環境下行動裝置記憶體、流量、電池資源有限，透過使用動態載入技術，將程式檔案打散成多個小文件，以延遲載入技術（LazyLoading），實現按需載入提升使用者體驗，降低行動端的資源使用率。在業務和樣式上，前端開發人員只需要在JS程式碼區塊頭部引用所需的js庫和css樣式即可。在邏輯上，開發人員只需呼叫後端提供的介面進行讀取與顯示。這種技術的主要優點包括可維護性高、動態載入快、前端效能最佳化好。

2、

研究模組化建構技術

在前端人員開發行動應用專案的基礎上，透過使用模組化建置技術，將每個頁面分成多個功能進行分塊化處理，這樣既可快速的實現移動端的頁面獲取，也可在移動端調試的時候快速定位相關問題。透過定義多個模組來相互調用，既保證了各個模組之間不會發生衝突，也提高了開發人員的編碼效率。其優點主要是職責單一、依賴就近。

3、

研究多解析度、多尺寸行動終端介面適配技術

針對行動裝置的各個終端設備，在基於bootstrap框架的基礎上，透過媒體查詢功能（Medie Query）來設定統一的樣式，透過視窗（meta）屬性內容，設定等比例窗口，這樣實現了不同手機型號的不同解析度、不同尺寸終端無法適配的問題，進一步減少程式碼的冗餘和再次開發。

4、

研究行動端公用元件的封裝

#基於bootstrap框架下一些元件封裝的有限，透過對時間插件(datatime)、彈窗插件(dialog)、圖形插件(echarts)、下拉刷新上拉加載插件(Refresh)、滑動插件(swiper)、省市區選擇(citypicker) 插件、提示資訊插件(UED )等一些插件進行封裝，按需調用，按需加載，以做到不同頁面引用不同的插件，實現組件的調用，大大減少了前端開發人員的時間，同時也提高了用戶體驗。

這裡，我們就拿其中一個插件－彈跳視窗來講解

先給大家看看效果圖吧

彈跳窗，基本上每個應用都會用到，而各式各樣的彈窗有那麼多，許多程式設計師，這邊寫一套，那邊寫一套，程式碼特別亂，這裡我在網路上也找了一套，自己單獨整理了一下，希望大家以後使用共同的一套程式碼，做到簡潔，簡單。

前端h5程式碼

h5頁面要做到簡潔，簡單，不允許有單獨的css和js邏輯程式碼（下面一句css程式碼是為了測試使用）

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
    0f3eabac747cdf61a51589c5584ae6e8
    8955b5d433b6cb2d7ba68ca7a2e6ee09
    b2386ffb911b14667cb8f0f91ea547a7首页6e916e0f7d1e588d4f442bf645aedb2f
    8492913265be600fb60cbb94f9489386
    c9ccee2e6ea535a969eb3f532ad9fe89.col-xs-6 {
            padding: 10px 1px;
        }531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    a3d26fddad773596419d66c0738d6f77

        5ee7ff1279557bf9d3442c1fbc9f99d0
            bb3a85de1217dcfe63c99733c3b467084a76263d43a77990c6bcabbb9005e721默认的弹窗65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708c54469d496a24a9c1e0568153a1716e8success65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467087b7f438a32e350a4b0de075e3701c07bprimary65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467081322bddd8b40166d1d002487d9690644danger65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708d31fa24aaf9ecd4007f06f20e49092efwarning65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708c54469d496a24a9c1e0568153a1716e8可设置背景色65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467081322bddd8b40166d1d002487d9690644自定义标题、描述65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467081322bddd8b40166d1d002487d9690644点后回调65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467084a76263d43a77990c6bcabbb9005e721box-shadow65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708c54469d496a24a9c1e0568153a1716e8box-shadow65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708
                7b7f438a32e350a4b0de075e3701c07bbox-shadow65281c5ac262bf6d81768915a4a77ac0
            16b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467087b7f438a32e350a4b0de075e3701c07b无进入动画65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708d31fa24aaf9ecd4007f06f20e49092ef单个按钮65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708
                a31450e006f06f8a717195c1bfafb650bootstrap弹窗65281c5ac262bf6d81768915a4a77ac0
            16b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708
                d15026b8666219832a1630ab13015612无标题65281c5ac262bf6d81768915a4a77ac0
            16b28748ea4df4d9c2150843fecfba68
        16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
    c353704c8b8ff0531df1112c5633c2ae
        9e8587a87e6ffb3735caf5892f257228这里是用户获取到的内容,获取的内容，可直接设置在这里，然后在页面显示16b28748ea4df4d9c2150843fecfba68
    2cacc6d41bbb37262a98f745aa00fbf0
    3f1c4e4b6b16bbbd69b2ee476dc4f83avar basepath = "../../";//定义当前目录的位置（如果全部在根目录的话，则不需要定义）2cacc6d41bbb37262a98f745aa00fbf00a3ba3c2fbc6d9cc3f003f0c2028cc75
    00dc4eb34cf264c27bd9438ee6b3973b2cacc6d41bbb37262a98f745aa00fbf0
    db2b95b9b93e43c57162d16b53b263cc
    8b88c59b03c43ad401f7885b437e24852cacc6d41bbb37262a98f745aa00fbf0
    2d83d03ec17e47ecba30435d234fd99c
    3f1c4e4b6b16bbbd69b2ee476dc4f83aseajs.use("../js/dialogs");2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

View Code

上面程式碼，是用我的通用框架程式碼，大家如果用到彈窗，可直接引用dialog. js 、dialog.css、jquery.js和dialogtest.js即可

dialogtest.js程式碼如下

define(function (require) {
    require("bootstrap");//加载bootstrap
    require(&#39;dialog&#39;);//加载弹窗  
    require(&#39;dialogcss&#39;);//加载弹窗  
  
 
    var modal = new Modal({
        title: &#39;测试案例&#39;,
        content: $(&#39;#modal-tpl&#39;).html(),
        width: "90%",
        onOk: function () {
            //操作
            alert("你点击了确定");
        },
        onModalShow: function () {
            //弹窗初始化操作
            
        }
    });
    $(".btn").each(function (index) {
        $(this).on("click", function () {
            if(index==0)
            {
                $(&#39;body&#39;).dailog({ type: &#39;defalut&#39; });
            }else if(index==1)
            {
                $(&#39;body&#39;).dailog({ type: &#39;success&#39; })
            }
            else if (index == 2) {
                $(&#39;body&#39;).dailog({ type: &#39;primary&#39; })
            }
            else if (index == 3) {
                $(&#39;body&#39;).dailog({ type: &#39;danger&#39; })
            }
            else if (index == 4) {
                $(&#39;body&#39;).dailog({ type: &#39;warning&#39; })
            }
            else if (index ==5) {
               $(&#39;body&#39;).dailog({ type: &#39;success&#39;, maskBg: &#39;rgba(33,11,22,0.5)&#39; })
            }
            else if (index ==6) {
                $(&#39;body&#39;).dailog({
                    type: &#39;danger&#39;, title: &#39;我是自定义标题&#39;, 
                    discription: &#39;这里是自定义的描述，可以写上你的描述或者他的描述，总之可以写很多文字，你自己看着办吧&#39;
                }, function (ret) {
                    if (ret.index == 0)
                    {
                        alert("你点击了确定按钮");
                    } else
                    {
                        alert("你点击了取消操作");
                    }
                    console.log("信息为："+JSON.stringify(ret));
                })
            } else if (index ==7) {
                $(&#39;body&#39;).dailog({
                    type: &#39;danger&#39;, title: &#39;错误提示&#39;,
                    discription: &#39;这里是自定义的描述，可以写上你的描述或者他的描述，总之可以写很多文字，你自己看着办吧&#39;,
                    isInput: true
                }, function (ret) {
                    console.log(ret);
                    if (ret.index === 0)
                    {
                        alert(&#39;你点击的是第&#39; + ret.index + &#39;个按钮,状态:&#39; + ret.input.status + &#39;;输入的值为:&#39; + ret.input.value)
                    };
                });
            } else if (index == 8) {
                $(&#39;body&#39;).dailog({ type: &#39;defalut&#39;, showBoxShadow: true })
            } else if (index ==9) {
                $(&#39;body&#39;).dailog({ type: &#39;success&#39;, showBoxShadow: true, maskBg: &#39;#fff&#39; })
            } else if (index == 10) {
                $(&#39;body&#39;).dailog({ type: &#39;primary&#39;, showBoxShadow: true, maskBg: &#39;#ccc&#39; })
            } else if (index == 11) {
                $(&#39;body&#39;).dailog({ type: &#39;primary&#39;, showBoxShadow: true, animateStyle: &#39;none&#39; })
            } else if (index == 12) {
                $(&#39;body&#39;).dailog({
                    type: &#39;warning&#39;, showBoxShadow: true, animateStyle: &#39;none&#39;,
                    bottons: [&#39;确定&#39;], discription: &#39;也许有点问题!&#39;
                })
            }else if(index==13)
            {
                modal.open();
            } else if (index == 14) {
                $(&#39;body&#39;).dailog({ type: &#39;defalut&#39;,showBoxShadow: true, animateStyle: &#39;none&#39;,isnobutton:false,
                    bottons: [&#39;关闭&#39;], discription: &#39;也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题!&#39;
                });
            }
        })
    })

})

以上是前端框架-彈跳窗的研究的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：用css3實作打點效果實例講解下一篇：用css3實作打點效果實例講解

看更多