Bootstrap前端通用框架可行性探究告诉之弹窗

在电力集团办事已有两年,开发的相继应用都以依照H5应用。而H5引用中又根据cordova.js
库来开发,各种外包公司接了使用,皆以贰只雾水,不知情怎么支付(下篇文章作者讲写电力音信按照cordova开发的重大,主要把有些常用的插件使用,蒙受的题材给列出来),那篇作品重如若助教使用基于seajs库和Bootstrap框架来搭建的一套前端通用框架。

前端框架主要探究了四点

1、 商讨Web框架的动态加载技术

针对移动互连网环境下活动端内存、流量、电池财富有限,通过采取动态加载技术,将先后文件打散成两个小文件,以延缓加载技术(LazyLoading),完毕按需加载升高用户体验,下跌移动端的能源使用率。在事情和体裁上,前端开发人员只需求在JS代码块尾部引用要求的js库和css样式即可。在逻辑上,开发人士只需调用后端提供的接口进行读取与展现。那种技能的主要优点包涵可维护性高、动态加载快、前端品质优化好。

2、 探讨模块化打造技术

在前者人士开发移动使用类型的基本功上,通过采纳模块化营造技术,将各个页面分成多少个功用进行分块化处理,那样既可急迅的兑现活动端的页面得到,也可在运动端调试的时候疾速稳定有关难题。通过定义七个模块来相互调用,既保障了一一模块之间不爆发争辨,又进步了开发人士的编码效用。其优点紧假如天职单壹 、珍贵就近。

3、 研商多分辨率、多尺码移动终端界面适配技术

针对移动端的种种终端设备,在依照bootstrap框架的基本功上,通过媒体询问效能(Medie
Query)来设置统一的体制,通过视窗(meta)属性内容,设置等比例窗口,那样完成了差异手机型号的两样分辨率、差距尺寸终端不可以适配的题材,进一步压缩代码的冗余和重复支付。

4、 研商活动端公用组件的卷入

据悉bootstrap框架下一些组件封装的星星点点,通过对时间插件(datatime)、弹窗插件(dialog)、图形插件(echarts)、下拉刷新上拉加载插件(Refresh)、滑动插件(swiper)、省市区采纳(citypicker)
插件、指示消息插件(UED)等局地插件进行打包,按需调用,按需加载,以成就不等页面引用不一致的插件,达成组件的调用,大大减弱了前端开发人士的时光,同时也压实了用户体验。

 

这边,大家就拿里面五个插件——弹窗来讲学

先给大家看看效果图吧

Bootstrap 1Bootstrap 2Bootstrap 3Bootstrap 4Bootstrap 5Bootstrap 6

弹窗,基本上每一个应用都会用到,而各式种种的弹窗有那么多,许多程序员,那边写一套,这边写一套,代码越发乱,那里自个儿在网上也找了一套,本人单独整理了弹指间,希望大家随后使用共同的一套代码,做到简洁,简单。

前端h5代码

h5页面要形成简洁,简单,不容许有独立的css和js逻辑代码(下面一句css代码是为着测试使用)

Bootstrap 7Bootstrap 8

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>首页</title>
    <meta charset="utf-8" />
    <style>
        .col-xs-6 {
            padding: 10px 1px;
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="row">
            <div class="col-xs-6"><button class="btn has-hover  input-reverse-tofull">默认的弹窗</button></div>
            <div class="col-xs-6"><button class="btn btn-success has-hover">success</button></div>
            <div class="col-xs-6"><button class="btn btn-primary has-hover">primary</button></div>
            <div class="col-xs-6"><button class="btn btn-danger has-hover">danger</button></div>
            <div class="col-xs-6"><button class="btn btn-warning has-hover">warning</button></div>
            <div class="col-xs-6"><button class="btn btn-success has-hover">可设置背景色</button></div>
            <div class="col-xs-6"><button class="btn btn-danger has-hover">自定义标题、描述</button></div>
            <div class="col-xs-6"><button class="btn btn-danger has-hover">点后回调</button></div>
            <div class="col-xs-6"><button class="btn has-hover  input-reverse-tofull">box-shadow</button></div>
            <div class="col-xs-6"><button class="btn btn-success has-hover">box-shadow</button></div>
            <div class="col-xs-6">
                <button class="btn btn-primary has-hover">box-shadow</button>
            </div>
            <div class="col-xs-6"><button class="btn btn-primary has-hover">无进入动画</button></div>
            <div class="col-xs-6"><button class="btn btn-warning has-hover">单个按钮</button></div>
            <div class="col-xs-6">
                <button type="button" class="btn btn-info" id="btn-modal">bootstrap弹窗</button>
            </div>
            <div class="col-xs-6">
                <button type="button" class="btn btn-info" >无标题</button>
            </div>
        </div>
    </div>
    <script type="text/html" id="modal-tpl">
        <div id="dialogContent">
            这里是用户获取到的内容,获取的内容,可直接设置在这里,然后在页面显示
        </div>
    </script>
    <script>
        var basepath = "../../";//定义当前目录的位置(如果全部在根目录的话,则不需要定义)</script>
    <!--1、首先加载sea.js 我们使用的是模块化来加载文件-->
    <script src="../../js/modules/sea.js"></script>
    <!--2、然后加载配置项-->
    <script src="../../config.js"></script>
    <!--3、最后使用seajs.use来加载当前需要加载的模块-->
    <script>
        seajs.use("../js/dialogs");
    </script>
</body>
</html>

View Code

地点代码,是用本人的通用框架代码,大家只要用到弹窗,可平昔引用dialog.js
、dialog.css、jquery.js和dialogtest.js即可

dialogtest.js代码如下

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: '也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题!'
                });
            }
        })
    })

})

  dialog.js和css ,小编打个包,我们想下载就下载用呢

http://files.cnblogs.com/files/dinghouchuanqi/dialog.zip

比方觉得还能,可扫以下二维码,赏多赏少都以您对自家的最大鼓励

Bootstrap 9         
 Bootstrap 10

相关文章