在很多项目中都会涉及到数据加载。数据加载有时可能会是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. LinuxMint 17.1 Cinnamon桌面窗口焦点bug

    LinuxMint 升级到 17.1后,发现桌面彻底不爽了. 发现各应用窗口经常无法正常获取焦点,必须用Alt + Tab切换才能解锁. 乌龙...

  2. Bash脚本实现批量作业并行化

    http://jerkwin.github.io/2013/12/14/Bash%E8%84%9A%E6%9C%AC%E5%AE%9E%E7%8E%B0%E6%89%B9%E9%87%8F%E4%BD ...

  3. Scalaz（28）－ ST Monad ：FP方式适用变量

    函数式编程模式强调纯代码(pure code),主要实现方式是使用不可变数据结构,目的是函数组合(composability)最终实现函数组件的重复使用.但是,如果我们在一个函数p内部使用了可变量(m ...

  4. [moka同学笔记]Yii2 数据操作Query Builder 2

    Query Builder $rows = (new \yii\db\Query()) ->select(['dyn_id', 'dyn_name']) ->from('zs_dynast ...

  5. spring入门（二）【加载properties文件】

    在开发过程当中需要用到配置信息,这些信息不能进行硬编码,这时配置文件是一个比较好的方式,java提供了properties格式的文件,以键值对的方式保存信息,在读取的时候通过键获得键对应的值,spri ...

  6. webapi的返回类型，webapi返回图片

    1.0 首先是返回常用的系统类型,当然这些返回方式不常用到.如:int,string,list,array等.这些类型直接返回即可. public List<string> Get() { ...

  7. 那些年,我们一起疯狂的C#

    v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VM ...

  8. Hibernate 配置 双向 对多关联 (未完待续·······)

                   从生疏到熟练  是要经历多少遍的练习? 这答案只能向自己找. 以Student和Course为例,一个学生可以选多门课程,一门课程也可以被多个学生选取: 首先  我们创建 ...

  9. Sharepoint2013:在页面上显示错误信息

    在sharepoint2013中我们需要修改以下三处的web.config,以显示错误信息 1, C:\inetpub\wwwroot\wss\VirtualDirectories\端口号\web.c ...

  10. 【分享】纯js的n级联动列表框 —— 基于jQuery，支持下拉列表框和列表框，最重要的是n级，当然还有更重要的

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...