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 相关操作可能会导致浏览器挂起,有时候甚至 ...
随机推荐
- Asp.Net Core- 多样性的配置来源
我们知道,ConfigurationProvider提供将数据源转换为字典的功能,数据源可以分为很多种,比如:物理文件.数据库.内存变量等等.物理文件又包括很多种类型的文件,比如:xml.json等等 ...
- BZOJ 2257: [Jsoi2009]瓶子和燃料 裴蜀定理
2257: [Jsoi2009]瓶子和燃料 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/p ...
- Win8 安装Oracle 10g 提示“程序异常终止”的解决方案
这段时间在做DRP,需要安装Oracle 10g的数据库,我的系统是win8企业版,安装Oracle 10g的时候,选择“高级安装”,提示“程序异常终止”,下面是几个解决方案,跟大家分享一下. 错误提 ...
- iOS之宏定义#define
最基本的宏定义用法 #define aaa bbb 表示用aaa替换bbb的内容. 宏作用范围 宏的作用范围是在当前文件内, 如果需要作用于其他类(如在类b调用类a已定义宏),那么需要在类b引入类a的 ...
- percona-toolkit -1
http://blog.chinaunix.net/uid/16844903/cid-165634-list-1.html
- requestCode 和 resultCode .
OK,代码如上,可能这个时候还会有点疑问,关于参数的疑问.直接看android sdk 帮助说得更清楚.我发现网上有些文章还有吧 requestCode 和 resultCode 混淆说明错的. st ...
- CentOS下yum安装mysql,jdk以及tomcat
首先说明,服务器是阿里云的,centos6.3_64位安全加固版.首先需要登陆进来,使用的是putty,因为最初的时候,Xshell登陆会被拒绝. 0. 创建个人文件夹 # 使用 yum 安装tomc ...
- Paginator
Paginator There are several ways to paginate items. The simplest is by using the paginate method on ...
- C++ (P199—P211)多态 虚函数 抽象类
在介绍多态之前,先回忆:赋值兼容原则.虚基类.二义性.派生类如何给基类赋值等知识. 在赋值兼容原则中:父类对象的指针赋给基类的指针或者父类的对象赋给基类的引用,可以通过强转基类的指针或者引用变为父类的 ...
- 开启nginx缓存
proxy_cache_path和proxy_cache可以开启基础缓存 proxy_cache_path:缓存路径 proxy_cache:用来启用缓存