在很多项目中都会涉及到数据加载。数据加载有时可能会是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. httpclient 调用WebAPI

    1.创建webapi项目,提供接口方法如下: /// <summary> /// 获取租户.位置下的所有传感器 /// </summary> /// <returns&g ...

  2. 调优Java virtual machine常见问题汇总整理

    数据类型 Java虚拟机中,数据类型可以分为两类:基本类型和引用类型.基本类型的变量保存原始值,即:他代表的值就是数值本身:而引用类型的变量保存引用值.“引用值”代表了某个对象的引用,而不是对象本身, ...

  3. Spark集群 + Akka + Kafka + Scala 开发(2) : 开发一个Spark应用

    前言 在Spark集群 + Akka + Kafka + Scala 开发(1) : 配置开发环境,我们已经部署好了一个Spark的开发环境. 本文的目标是写一个Spark应用,并可以在集群中测试. ...

  4. socket.io，远程控制你的幻灯片

    原文:http://www.cnblogs.com/xiezhengcai/p/3964455.html 中秋休息了几天,今天又开始捣鼓socket.io了.今天的任务是通过socket.io控制你的 ...

  5. CentOS minimal网络设置

    CentOS minimal版本默认不启动网络,所以要自己配置. 配置过程: 编辑配置文件: vi /etc/sysconfig/network-script/ifcfg-eth0 需要更改两项 NM ...

  6. windows根据端口号找进程

    d:\>netstat -ano | findstr "7777" TCP 127.0.0.1:7776 127.0.0.1:7777 ESTABLISHED 11764 T ...

  7. 国际化支持(I18N)

    本章译者:@nixil 使用国际化支持(I18N)能够使你的应用根据用户所在地区的不同选择不同的语言.下面介绍如何在引用中使用国际化. 只允许使用UTF-8 Play只支持UTF-8一种字符编码.这是 ...

  8. 微信中a链接无法进行跳转

    [问题]微信页面开发时,各个主页之间的跳转,完全是通过a链接进行的,但是来回跳转几次,再次从其他主页面跳回首页的时候,微信头部出现了跳转加载进度条,但是就是不跳转,也没有任何反应 [范围]只出现在微信 ...

  9. react native 学习一(环境搭配和常见错误的解决)

    react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...

  10. HHKB MAC 配置指南 操作指南 快捷键

    1. 设备: mac电脑一台.hhkb键盘一个 2. 初级配置 (1)调节hhkb的模式为Macintosh模式:011001 (打开键盘侧边的滑盖,按照这个顺序调正) (2)Mac电脑安装官方驱动  ...