Front-end framework-pop-up window research

I have been working in an electric power company for two years, and all the applications developed are based on H5 applications. The H5 reference is developed based on the cordova.js library. When various outsourcing companies received the application, they were all confused and did not know how to develop it. This article mainly explains the use of a front-end built based on the seajs library and the Bootstrap framework. Universal framework.

The front-end framework mainly studies four points

1. ResearchThe dynamic loading technology of the Web framework

For In the mobile Internet environment, mobile terminals have limited memory, traffic, and battery resources. By using dynamic loading technology, program files are broken into multiple small files, and lazy loading technology (LazyLoading) is used to achieve on-demand loading to improve user experience. Reduce resource usage on mobile terminal. In terms of business and style, front-end developers only need to reference the required js library and css style at the head of the JS code block. Logically, developers only need to call the interface provided by the backend to read and display. The main advantages of this technology include high maintainability, fast dynamic loading, and good front-end performance optimization.

2. Research on modularizationBuilding technology

Based on the development of mobile application projects by front-end personnel, by using modular construction technology, Each page is divided into multiple functions for segmentation processing, which can not only quickly obtain the page on the mobile terminal, but also quickly locate related problems during debugging on the mobile terminal. By defining multiple modules to call each other, it not only ensures that there is no conflict between modules, but also improves the coding efficiency of developers. Its main advantages are single responsibility and close dependence.

3. Research on multi-resolution and multi-size mobile terminal interface adaptation technology

For various terminal devices on the mobile side, based on the bootstrap framework On the basis of, a unified style is set through the media query function (Medie Query), and equal proportion windows are set through the window (meta) attribute content. This solves the problem of different mobile phone models with different resolutions and different sizes of terminals being unable to adapt. , further reducing code redundancy and redevelopment.

4. Study on the encapsulation of public components on the mobile terminal

Based on the limited encapsulation of some components under the bootstrap framework, through the time plug-in (datatime), pop-up window plug-in (dialog), graphics plug-in (echarts), pull-down refresh and pull-up loading plug-in (Refresh), sliding plug-in (swiper), province and city selection (citypicker) plug-in, prompt information plug-in (UED) ) and other plug-ins are encapsulated, called on demand, and loaded on demand, so that different pages can reference different plug-ins and implement the calling of components, which greatly reduces the time of front-end developers and also improves the user experience.

Here, we will use one of the plug-ins-the pop-up window to explain

Let me show you the renderings first

Pop-up windows are basically used in every application, and there are so many kinds of pop-up windows. Many programmers, here Write one set, write another over there, the code is very messy, here I also found a set on the Internet, and sorted it out myself. I hope everyone will use a common set of codes in the future to make it concise and simple.

Front-end h5 code

The h5 page should be concise and simple, and separate css and js logic codes are not allowed (the following css code is for testing)

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

The above code uses my general framework code. If you use pop-up windows, you can directly quote the dialog. js, dialog.css, jquery.js and dialogtest.js can

dialogtest.js code is as follows

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

})

The above is the detailed content of Front-end framework-pop-up window research. For more information, please follow other related articles on the PHP Chinese website!