在很多项目中都会涉及到数据加载。数据加载有时可能会是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插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）的更多相关文章

  1. jQuery插件--根据数据加载的进度动画案例

    css: *{ margin:; padding:; } @media screen and (min-width:320px){ html{font-size:12px;}} @media scre ...

  2. JQuery 数据加载中禁止操作页面

    比较常见的做法,但对我而言是第一次做,记录一下. 为了把找来的loading.gif 的背景色设置为透明,还特意装了quicktime. 有学到一些额外的东西. 先将div及img定义好 <bo ...

  3. JQuery 之 在数据加载完成后才自动执行函数

    数据加载完成执行: $(window).load(function(){ ... }); 进入页就执行,不论等数据是否加载完成: $(document).ready(function(){ ... } ...

  4. jquery插件图片延时加载实例详解

    效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...

  5. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

  6. layui数据加载中遮罩层的实现

    1.load方法提供三种风格供选择. 方法一:loadIndex = layer.load(); //不传参,默认0 方法二:loadIndex = layer.load(1); // 1,另外一种风 ...

  7. dwz ie10一直提示数据加载中

    dwz js资源jquery.validate.js 搜索 this.attr('novalidate', 'novalidate'); 在33行左右 用if (typeof (Worker) !== ...

  8. APP中数据加载的6种方式-b

    我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...

  9. 一个mui扩展插件mui.showLoading加载框【转】

    转:http://ask.dcloud.net.cn/article/12856 写在前面:好像mui目前dialog系列唯独缺少showLoading加载框(加载中)组件,为了统一组件样式和体验,写 ...

随机推荐

  1. XMPP客户端开发(1)--连接和登录

    Smack可用于XMPP客户端的开发,下载Smack,将相关jar文件导入后,即可以开始XMPP客户端的开发. 以下代码实现了客户端连接Tigase服务器,并根据用户名和密码登录. package X ...

  2. FreeBSD应该装gnome3做桌面

    目前freebsd pkg包管理体系的repo源多了一些,速度快了很多. 仓库中目前的版本为3.14,安装gnome3很简单. pkg install xorg gnome3 echo "e ...

  3. Java中使用Jedis操作Redis

    使用Java操作Redis需要jedis-2.1.0.jar,下载地址:http://files.cnblogs.com/liuling/jedis-2.1.0.jar.zip 如果需要使用Redis ...

  4. 通俗易懂地讲解TCP建立连接的三次握手和释放连接的四次挥手

    TCP建立连接时,为什么要进行三次挥手? 每一次TCP连接都需要三个阶段:连接建立.数据传送和连接释放.三次握手就发生在连接建立阶段. 在谢希仁著<计算机网络>第四版中讲三次握手的目的是为 ...

  5. R语言XML格式数据导入与处理

    数据解析 XML是一种可扩展标记语言,它被设计用来传输和存储数据.XML是各种应用程序之间进行数据传输的最常用的工具.它与Access,Oracle和SQL Server等数据库不同,数据库提供了更强 ...

  6. 哇 真的是一个好插件！！！Sublime Text编辑文件后快速刷新浏览器

    http://9iphp.com/web/html/sublime-text-refresh-browser.html这篇博文咯 来源:[Tips]Sublime Text编辑文件后快速刷新浏览器 - ...

  7. js从外部获取图片

    图片ping:图片可以从任何URL中加载,所以将img的src设置成其它域的URL,即可以实现简单的跨域,可以使用onload和onerror事件来确定是否接受到了响应 var img=new Ima ...

  8. 关于HTML面试题汇总之visibility

    一.页面可见性(visibility) 主要提供两个属性,一个事件(都在document对象上):1. 属性:   1.1.  hidden:获取或设置当前页面的可见性,boolean值:   1.2 ...

  9. 2015年免费的25款 WordPress 网站模板

    2015年 WordPress 插件和主题的数量继续在增长.这一年,我们可以期待WP主题引入一些新的技术,从背景,自适应响应式图像到从背景图片中提取主色. 本文包含25款最近发布的 WordPress ...

  10. Bootstrap transition.js 插件详解

    Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单 ...