Rumah >hujung hadapan web >Tutorial H5 >前端框架-弹窗的研究

前端框架-弹窗的研究

大家讲道理asal: 2017-07-15 11:52:272863semak imbas

在电力公司工作已有两年，开发的各个应用都是基于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;
                });
            }
        })
    })

})

Atas ialah kandungan terperinci 前端框架-弹窗的研究. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：用css3实现打点效果实例讲解Artikel seterusnya：仿新浪部分静态页面展示

Artikel berkaitan

Lihat lagi