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购物车实现方法
1.可以参考PetShop中的购物车实现方法 2.[经典示例分享]— 商城购物车设计(VS+Access)附源码 http://www.cnblogs.com/wenyang-rio/archive/ ...
- 安卓Android控件ListView获取item中EditText值
可以明确,现在没有直接方法可以获得ListView中每一行EditText的值. 解决方案:重写BaseAdapter,然后自行获取ListView中每行输入的EditText值. 大概算法:重写Ba ...
- 对PostgreSQL的prepared statement的深入理解
看官方文档: http://www.postgresql.org/docs/current/static/sql-prepare.html PREPARE creates a prepared sta ...
- OpenCV 显示Mat矩阵异常 显示“程序停止工作” 解决办法
笔者调试OpenCV 程序时,在使用标准输出显示Mat矩阵时,编译没有错误,但每次运行都弹出程序停止工作的对话框.google之,得到解决方案. 程序如下: #include <iostream ...
- Android选择系统相册或拍照上传
PhotoUtils.rar
- 一个 Android 任务队列的实现
最近在做Android项目时遇到这样一个问题:客户端向服务器请求数据,而在网络信号太差的情况下,数据迟迟不到,甚至丢失.服务器为了解决这个问题做了频繁的重发,android 客户端就会收到很多不想要的 ...
- android131 360 01 闪屏页和主页面
主界面: 软件升级流程: 清单文件: <?xml version="1.0" encoding="utf-8"?> <manifest xml ...
- MySQL的数据类型(转)
MySQL的数据类型 1.整数 TINYINT: 8 bit 存储空间 SMALLINT: 16 bit 存储空间 MEDIUMINT: 24 bit 存储空间 INT: 32 bit 存储空间 BI ...
- global 用法
<?php//$GLOBALS['he']="hechunhuae";function Test(){ //global $he; $GLOBALS['he']=" ...
- CMS漏洞
例1, discuz!后台弱口令/暴力破解 1.http://club.lenovo.com.cn/admin.php