JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）
在很多项目中都会涉及到数据加载。数据加载有时可能会是2-3秒，为了给一个友好的提示，一般都会给一个【数据加载中。。。】的提示。今天就做了一个这样的提示框。
先去jQuery官网看看怎么写jQuery插件，然后就开始写了。写下来这么一个插件，稍作优化，就在项目中使用了。下面贴的是我写这个插件时的测试图：
这张图模拟数据加载前提示框的展示，这个表格是一个写在页面上的。蓝色的底纹就是遮罩层。
(function($){
$.fn.extend({
/**
* 打开遮罩，并显示一段文字。
* @param {String} msg [显示的文字]
* @param {String} imgsrc [图片的位置]
* @return {void}
*/
openMask:function(msg, imgsrc){
// var loadDiv=$("body").find("._mask_loadDiv");
var loadDiv=this.find("._mask_loadDiv");
if(!loadDiv || !loadDiv[0]){ // add Mask
var loadDiv=$("<div class='_mask_loadDiv' style='position:absolute; z-index:99999; height:40px; background:#FFF; border:1px solid #ACE'></div>");
if(!imgsrc){ // 指定默认的图片
var scripts=document.getElementsByTagName("script");
for(var i=0; i<scripts.length; i++){
if(scripts[i].src.indexOf("mask")!=-1){
var scriptSrc=scripts[i].src;
var uri=scriptSrc.substring(0,scriptSrc.lastIndexOf("/"));
imgsrc=uri+"/images/mask_loading.gif";
}
}
}
var contentDiv=$("<div class='_mask_content' style='position:relative;text-align:center;' >");
var fontsize=12;
//loadDiv的宽度= msg的宽度+img的宽度
var loadDiv_width=msg.length*fontsize+16+3;
contentDiv.css("width",loadDiv_width);
loadDiv.css("width",loadDiv_width);
if(imgsrc){
contentDiv.append("<img src='"+imgsrc+"' alt='"+msg+"' style='width:16px; height:16px'>")
.append("<span style='font-size:"+fontsize+"px; margin-left:2px; vertical-align:text-top'>"+msg+"</span>");
}
this.append(loadDiv.append(contentDiv));
// $("body").append(loadDiv.append(contentDiv));
/*
loadDiv[0].style.top=this[0].offsetTop+(this[0].offsetHeight-loadDiv[0].offsetHeight)/2;
loadDiv[0].style.left=this[0].offsetLeft+(this[0].offsetWidth-loadDiv[0].offsetWidth)/2;
loadDiv[0].style.paddingTop=(loadDiv[0].offsetHeight-contentDiv[0].offsetHeight)/2;
*/
loadDiv.css("top",this[0].offsetTop+(this[0].offsetHeight-loadDiv[0].offsetHeight)/2);
loadDiv.css("left",this[0].offsetLeft+(this[0].offsetWidth-loadDiv[0].offsetWidth)/2);
loadDiv.css("padding-top",(loadDiv[0].offsetHeight-contentDiv[0].offsetHeight)/2);
}
loadDiv.css("z-index",99999).css("display","block");
return this;
},
closeMask:function(){
// var loadDiv=$("body").find("._mask_loadDiv");
var loadDiv=this.find("._mask_loadDiv");
if(loadDiv)
loadDiv.css("display","none").css("z-index",-99999);
return this;
}
});
})(jQuery);
/*
// 这个是遮罩层里信息展示框,这个会添加到 <body> 或者 target 元素中
<div class="_mask_loadDiv">
<div class="_mask_content">
<img src='imgsrc' alt='msg' >
<span>msg</span>
</div>
</div>
//这个是目标，要在它上显示遮罩层
<div id="target">
</div>
// 只需要下面的代码：
$("#target").openMask("数据加载中。。。");
// 隐藏对话框，只需要：
$("#target").closeMask();
*/
因为涉及到的CSS并不多，就没有遵循HTML、JS、CSS分离的原则，而是将CSS都在这个JS 中写了。
测试页面代码：
<html>
<head>
<script type="text/javascript" src="./jquery-mask/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./jquery-mask/jquery.mask.js"></script>
<script type="text/javascript">
var helloDiv;
$(function(){
var tbl=$("#tableContent");
for(var i=0; i< 16;i++){
tbl.append('<tr><td width="25%">hello</td><td width="25%">world</td><td width="25%">jquery</td><td width="22%">mask</td></tr>');
}
helloDiv=$("#hello");
helloDiv.openMask('数据加载中。。。'); }); function openMask(){
helloDiv.openMask("数据加载中。。。。");
} function closeMask(){
helloDiv.closeMask("数据加载中。。。。");
}
</script>
<body>
<div id="hello" style="width:300px; height:400px; background-color:#ACE;">
<table border="1" width="100%" id="tableContent">
</table>
</div>
<input value="open" type="button" onclick="openMask();"><br>
<input type="button" value="close" onclick="closeMask();">
</body>
</head>
</html>
test.html
写这个插件的重点是：计算提示框的位置问题(top, left)、提示框层次问题（z-index）。
要理解这些属性可以看看：CSS位置和布局的相关博客。
源码参见：http://files.cnblogs.com/f1194361820/jquery-mask.zip
JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）的更多相关文章
- jQuery插件--根据数据加载的进度动画案例
css: *{ margin:; padding:; } @media screen and (min-width:320px){ html{font-size:12px;}} @media scre ...
- JQuery 数据加载中禁止操作页面
比较常见的做法,但对我而言是第一次做,记录一下. 为了把找来的loading.gif 的背景色设置为透明,还特意装了quicktime. 有学到一些额外的东西. 先将div及img定义好 <bo ...
- JQuery 之 在数据加载完成后才自动执行函数
数据加载完成执行: $(window).load(function(){ ... }); 进入页就执行,不论等数据是否加载完成: $(document).ready(function(){ ... } ...
- jquery插件图片延时加载实例详解
效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...
- jQuery插件图片懒加载lazyload
来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...
- layui数据加载中遮罩层的实现
1.load方法提供三种风格供选择. 方法一:loadIndex = layer.load(); //不传参,默认0 方法二:loadIndex = layer.load(1); // 1,另外一种风 ...
- dwz ie10一直提示数据加载中
dwz js资源jquery.validate.js 搜索 this.attr('novalidate', 'novalidate'); 在33行左右 用if (typeof (Worker) !== ...
- APP中数据加载的6种方式-b
我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...
- 一个mui扩展插件mui.showLoading加载框【转】
转:http://ask.dcloud.net.cn/article/12856 写在前面:好像mui目前dialog系列唯独缺少showLoading加载框(加载中)组件,为了统一组件样式和体验,写 ...
随机推荐
- MyEclipse10修改servlet模版
Myeclipse10中servlet模版存放的位置与早些的版本不同,它存放在: MyEclipse\Common\plugins中的下面那个jar包中 com.genuitec.eclipse.wi ...
- MySQL 语句大全--------添加列，修改列，删除列
ALTER TABLE:添加,修改,删除表的列,约束等表的定义. 查看列:desc 表名; 修改表名:alter table t_book rename to bbb; 添加列:alter table ...
- java 小程序--杨辉三角
1. 代码 public static void main(String[] args) { ][]; ; i<; i++){ triangle[i] = ]; ; j<=i; j++){ ...
- PHP中使用redis执行lua脚本示例
摸索了一下在PHP中如何使用redis执行lua脚本,写了一个脚本如下,供以后参考 <?php $redis = new Redis(); #实例化redis类 $redis->conne ...
- 2016读书List
2016年读书书单. 1. <华尔街漫步> + <战胜华尔街>+ <华尔街之狼> 2. <野蛮大陆> 3. <第三帝国的最后十四天> 4. ...
- 开发apple pay碰到的问题总结
本来想简单总结一下Apple Pay 开发过程中的几个问题, 结果被下面这篇文章全碰上了, 干脆全文转载, 作者对相关资源整理得比较详细, 比较有参考价值 总的来说, 我们做过 APNs 推送的话, ...
- Subway Icon Set – 306个像素完美的特制图标
这个图标集是306个优化的像素完美,精雕细琢的图标.为这些设备进行了优化:iOS.Windows Phone.Windows 8 and BlackBerry 10,提供 PNG, SVG, XALM ...
- 如何对sharepoint图片库的文件夹的图片按照时间排序并分页显示
/// <summary> /// 获取图片库第一层文件夹--根据文件夹名称排序 /// </summary> /// <param name="siteUrl ...
- sharepoint 开发相关工具总结
1.CAML Designer 2013 开发caml用 http://biwug-web.sharepoint.com/SitePages/Caml_designer.aspx 2.SharePoi ...
- SharePoint 2013 showModalDialog 弹出模式窗口
1. SharePoint 弹出框 本文讲述SharePoint 2013 中使用 SP.UI.ModalDialog.showModalDialog时 showModalDialog 未定义的问题 ...