BootstrapDialog.show函数底层简化
平台用的全部都是BootStrapDialog的弹窗,然后美工设计了一个统一的样式,每次写的时候,都要对其进行样式重写;写吐了快,所以对BootStrap.底层做了修改;
也就是说,只要你要写的界面包含了bootstrap就可以使用这个标准的弹窗;
调用方法非常简单;
0、弹窗底层 参数介绍
1、title 弹窗标题
2、html 弹窗内容(可以夹带左侧的一个图标自动对齐)
3、url 弹窗关闭后的跳转地址
4、callback function 点击确定后的执行函数
5、flog 是否强制跳转路径
***/
1、基本的乐学一百标准弹窗:
BootstrapDialog1.Init('提示','你好');
当不传递回调函数,与url地址时,确定按钮与取消按钮点击都是关闭弹窗;
2、带有url跳转的弹窗:
BootstrapDialog1.Init('提示','你好','mk.php?do=article_new&nav_id=-100');
url可以是任意地址,不局限与乐学地址;点击确定后跳转;
3、带有回调函数的弹窗:
举个例子:
<script type='text/javascript'>
var TESTco={
fun1:function (content) {
alert(content);
}
}
$(function(){
BootstrapDialog1.Init('提示','你好','mk.php?do=article_new&nav_id=-100','TESTco.fun1(123);');
});
</script>
运行结果:
当然,不局限与非要传递一个url可以不传递,那么上边的执行结果就是,不跳转,执行函数;可以在函数中做任何事情;
4、强制跳转;
有些弹窗关闭时必须要跳转至某个路径,那么就会用到最后一个参数
标题,内容与URL要传递,可以不传递回调函数,最后将参数设置为true
任何形式的关闭都将自动跳转url 确定按钮,空白处,关闭按钮等;
至于其他的,比如不能点击空白处关闭弹窗等特殊的需求,就需要自己写了~
说到底,就是不想写那么多冗余的代码,一套样式哪儿都是。。而且每次都要写,太麻烦。。。
已提交SVN更新即可使用,当然肯定有更多的扩展空间的,欢迎继续优化~~~
底层代码:
- var BootstrapDialog1={
- /***
- * 弹窗底层
- * @param title 弹窗标题
- * @param html 弹窗内容
- * @param url 弹窗关闭后的跳转地址
- * @callback function 点击确定后的执行函数
- * ***/
- Init :function(title,html,url,callback,flog){
- BootstrapDialog.show({
- title : title,
- type: BootstrapDialog.TYPE_DEFAULT,
- size: BootstrapDialog.SIZE_NORMAL,
- message: html,
- cssClass:'BootstrapDialog1',
- buttons: [{
- label: '确定',
- action: function(result){
- if(callback){
- eval(callback);
- }
- if(url){
- window.location.href=url;
- }
- result.close();
- }
- },{
- label: '取消',
- cssClass:'cancel_btn',
- action: function(result){
- result.close();
- }
- }],
- onhidden : function () {
- if(url && flog){
- window.location.href=url;
- }
- }
- });
- }
- }
CSS代码如下:
- /***弹窗样式开始*******/
- .BootstrapDialog1{margin-top:15%;}
- .BootstrapDialog1 .modal-dialog .modal-content{border-radius:0px;font-family:微软雅黑;}
- .BootstrapDialog1 .modal-dialog .modal-content .modal-header{background-color:#E8E8E8;}
- .BootstrapDialog1 .modal-dialog .modal-content .modal-body{line-height:150px;text-align:center;font-size:15px;}
- .BootstrapDialog1 .modal-dialog .modal-content .modal-body img{margin-right:80px;}
- .BootstrapDialog1 .modal-dialog .modal-content .modal-body span{font-size:20px;}
- .BootstrapDialog1 .modal-dialog .modal-content .modal-footer {border-top:1px dashed #e5e5e5}
- .BootstrapDialog1 .modal-dialog .modal-content .modal-footer .bootstrap-dialog-footer .bootstrap-dialog-footer-buttons{text-align:right;}
- .BootstrapDialog1 .modal-dialog .modal-content .modal-footer .bootstrap-dialog-footer .bootstrap-dialog-footer-buttons .btn{padding:8px 40px;background-color:#EC6C00;border-radius:0px;color:#FFFFFF;border:1px solid #EC6C00;}
- .BootstrapDialog1 .modal-dialog .modal-content .modal-footer .bootstrap-dialog-footer .bootstrap-dialog-footer-buttons .cancel_btn{color:#666666;background-color:#FFFFFF;border:1px solid #CCCCCC;}
- /***弹窗样式结束*******/
BootstrapDialog.show函数底层简化的更多相关文章
- 大话Python函数底层逻辑
函数 叫 子过程或子程序 描叙的更为贴近实际应用场景 这和数学中的函数实现上不同但语义上相识,如 f(x) = expressiom, 给定一个确定的输入必然返回一个确定的输出 数学中函数的关系是通过 ...
- jQuery.ajax() 函数详解
jQuery.ajax()函数用于通过后台HTTP请求加载远程数据. jQuery.ajax()函数是jQuery封装的AJAX技术实现,通过该函数,我们无需刷新当前页面即可获取远程服务器上的数据. ...
- R中的高效批量处理函数(lapply sapply apply tapply mapply)(转)
转自:http://blog.csdn.net/wa2003/article/details/45887055 R语言提供了批量处理函数,可以循环遍历某个集合内的所有或部分元素,以简化操作. 这些函数 ...
- 信号的捕捉与sigaction函数
一.内核如何实现信号的捕捉 如果信号的处理动作是用户自定义函数,在信号递达时就调用这个函数,这称为捕捉信号.由于信号处理函数的代码是在用户空间的,处理过程比较复杂,举例如下: 1. 用户程序注册了SI ...
- Entity Framework 6 Recipes 2nd Edition(11-4)译 -> 在”模型定义”函数里调用另一个”模型定义”函数
11-4.在”模型定义”函数里调用另一个”模型定义”函数 问题 想要用一个”模型定义”函数去实现另一个”模型定义”函数 解决方案 假设我们已有一个公司合伙人关系连同它们的结构模型,如Figure 11 ...
- Join函数 及Split函数精解示例
'************************************************************************* '**模 块 名:Join函数 及Split函数精 ...
- OFFSET 函数
转自http://office.microsoft.com/zh-cn/excel-help/HP010342739.aspx OFFSET 函数 全部显示 全部隐藏 本文介绍 Microsoft E ...
- 你不知道的函数节流,提高你的JS性能!
浏览器的DOM计算处理非常耗费CPU时间,霸占内存,这对我们的开发来说是非常不友好的,,比如IE浏览器的onresize事件就可能在用户稍微拖动一下窗口时计算上千次,甚至更高频率直接让浏览器崩溃... ...
- 简述JavaScript函数节流
为什么要用函数节流 浏览器中某些计算和处理要比其他的昂贵很多.例如,DOM 操作比起非 DOM 交互需要更多的内存和 CPU 时间.连续尝试进行过多的 DOM 相关操作可能会导致浏览器挂起,有时候甚至 ...
随机推荐
- go strings 常用的几个函数
fmt.Println(strings.ToUpper("hello world")) //转换为大写 fmt.Println(strings.ToLower("H ...
- 区域医疗移动医疗影像解决方案2--基于FLEX的PACS
基于Flex的PACS和基于HTML5的PACS,都不是基于DICOM的WADO的方式,即所有的图像操作,移动.缩放.旋转.测量.伪彩.窗宽窗位调整等都是在本地浏览器能够完成,不用和服务器进行频繁的交 ...
- python无私有成员变量
python解释器将__init__函数里的__z变量转成 _classname__z了,明确规则后外部依旧能够通过实力对象来訪问. In [1]: class aa: ...: def __init ...
- yum、RPM常用的命令(转)
# yum install xxx 安装xxx软件# yum info xxx 查看xxx软件的信息# yum remove xxx ...
- Android 图片三级缓存之内存缓存(告别软引用(SoftRefrerence)和弱引用(WeakReference))
因为之前项目同事使用了图片三级缓存,今天整理项目的时候发现同事还是使用了软引用(SoftRefrerence)和弱引用(WeakReference),来管理在内存中的缓存.看到这个我就感觉不对了.脑海 ...
- C#_IComparer实例 - 实现ID或者yearOfscv排序
调用LIST的Sort的时候会调用IComparer的默认实现,quicksort会调用每个元素的CompareTo的IComparable实现 using System; using System. ...
- 生产者/消费者问题的多种Java实现方式--转
实质上,很多后台服务程序并发控制的基本原理都可以归纳为生产者/消费者模式,而这是恰恰是在本科操作系统课堂上老师反复讲解,而我们却视而不见不以为然的.在博文<一种面向作业流(工作流)的轻量级可复用 ...
- 比较js中创建对象的几种方式
1.工厂模式 function createObj(name, sex){ var obj = new Object(); obj.name = name; obj.sex = sex; obj.sa ...
- java validator的原理与使用
http://developer.51cto.com/art/201104/253257_1.htm ava EE 6核心特征:Bean Validation特性概述(2) 2011-04-02 14 ...
- java基础学习总结三(jdk7新特性、变量(局部变量和成员变量)、常量以及运算符)
一:jdk7新特性 可以表示二进制数值,以0b开头,中间可以使用下划线_分隔符.如下: @Test /** * 测试jdk新特性 */ public void testJdk7(){ int a=0b ...