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加载框(加载中)组件,为了统一组件样式和体验,写 ...
随机推荐
- iOS阶段学习第15天笔记(NSDate操作)
iOS学习(OC语言)知识点整理 一.OC关于NSDate类的操作实例代码 //默认直接显示对象,显示的是格林威治时间 //获取当前日期时间的实例方法 NSDate *date1=[[NSDate a ...
- 【C#进阶系列】12 泛型
泛型是CLR和编程语言提供的一种特殊机制,它用于满足“算法重用” . 可以想象一下一个只有操作的参数的数据类型不同的策略模式,完全可以用泛型来化为一个函数. 以下是它的优势: 类型安全 给泛型算法应 ...
- Java---Java的面试题（二）
1 Switch能否用string做参数?在 Java 7 之前, switch 只能支持byte,short,char,int 或者其对应的封装类以及 Enum 类型.在JAVA 7中,String ...
- Output data in a cursor
http://www.java2s.com/Code/SQL/Cursor/Outputdatainacursor.htm mysql> mysql> mysql> CREATE T ...
- web工程依赖的问题
http://blog.csdn.net/testcs_dn/article/details/43764497 做个记录
- 设计模式/原则篇- Unit of Work
概念 Unit of Work 即工作单元. 用来维护一组受业务影响的对象列表,将多个操作放在一个单元中,把操作原子化,通过事务统一完成一次提交,如果某个过程出现异常,就将所有修改进行回滚,保证数据的 ...
- 推荐12个最好的 JavaScript 图形绘制库
众多周知,图形和图表要比文本更具表现力和说服力.图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web ...
- HTML <base> 标签 为页面上的所有链接规定默认地址或默认目标
定义和用法 <base> 标签为页面上的所有链接规定默认地址或默认目标. 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白. 使用 <base& ...
- SAP 中的用户类型
在使用 SU01 维护用户时,在登录数据选项卡中会要求选择用户类型,一般我们都选择第一项 Dialog,但是其他几个选项有什么作用呢?下面我们就一一解释. 对话用户顾名思义,就是需要通过 SAP GU ...
- Javascript 中的window.parent ,window.top,window.self 详解
在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法 ...