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加载框(加载中)组件,为了统一组件样式和体验,写 ...

随机推荐

【Java每日一题】20161116
package Nov2016; public class Ques1116 { public static void main(String[] args){ System.out.println( ...
==与equals()
java中的比较有很多种 1.== 2.equals() 3.< 或 >或 != 4.instanceof 5.compareTo 1.什么时候用"==" 什么时候用& ...
解决ambiguous symbol命名空间中类名、变量名冲突的问题
最近在将一个复杂的工程集成到现有的项目中.编译时发现,有的变量名冲突了,提示就是xxxx ambiguous symbol,并且在编译输出时,指明了两个文件当中特定的变量名或者类名相同.出现这个编译错 ...
Guava学习笔记：Ordering犀利的比较器
Ordering是Guava类库提供的一个犀利强大的比较器工具,Guava的Ordering和JDK Comparator相比功能更强.它非常容易扩展,可以轻松构造复杂的comparator,然后用在 ...
C#语言的基础
一.C#的引入 01..net和C#的区别 1)大概在2000年,微软推出了一种革命性的产品--.NET(战略) 目标:任何人,在任何地方,使用任何终端设备,都可以访问微软提供的服务. 2).net ...
PyInstaller 安装方法及简单的编译exe (python3)
安装PyInstaller //地址 https://github.com/pyinstaller/pyinstaller/tree/python3 //上面的链接已经失效,新的(20160809更) ...
读《数据结构与算法 Javascript描述》 | 平淡无奇
“平淡无奇”,一句话总结. 当初买这本书的原因,在意的是有没有什么令人惊喜的东西,特别是针对Javascript代码的奇思妙想,所以就买下了这本书. 在买的几本书里面,最先看的也是这一本,但看起目录就 ...
使用js实现带有停顿效果的图片滚动（按钮控制）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
EWS API 2.0读取日历信息-读取内容注意事项
采用模拟账号的方式读取日历信息,注意下日历的内容读取(Body)读取.代码如下:(采用 EWS API 2.0版本) 1.读取内容前必须设置如下属性:否则会提示:You must load or as ...
arcgis批量处理mxd定义服务中的路径
>>> from arcpy import env... env.workspace=r"c:\165mxd"... out = r"c:\166mx ...

JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）

JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）的更多相关文章

随机推荐

热门专题