现在位置首页 / 前端开发 /正文

jquery插件--进度提示遮罩层插件:jquery-mask

作者: IT小兵 | 2014年9月3日| 热度:℃ | 评论: |参与:

在以前分享过jquery的弹出层,可以用作消息提示,也有进度条进行进度展示,但是没有一个一个遮罩层显示进度条。今天就给大家推荐一个jquery的进度提示遮罩层插件:jquery-mask。

先看效果图:

插件源代码:

(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();
*/

调用方式:

<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

demo百度网盘下载地址:链接:http://pan.baidu.com/s/1jJEfc   密码:6cph

参考其他插件:

[Jquery 简单大方美观的进度条插件-NProgress中文使用说明]

[Jquery 漂亮进度条插件--processbar]

原文地址:

http://www.cnblogs.com/f1194361820/p/3953853.html


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询