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

Jquery简洁遮罩层插件:jqLoding 演示及demo下载

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

jquery的插件很多,这不是找jquery的遮罩层插件来,一搜一大堆。但是那个是好用而且简单的就不好说了。今天分享一个简单的jquery遮罩层插件:jqLoding.js。

全局遮罩效果 

 

  

 

 

功能如下

  1 可以全屏遮 用于提交数据时

  2  局部遮,用于重复提交,只遮提交按钮,此功能当时在CSDN的登录中看到过,当时觉得还不错

      3  遮罩上的提示文字可自己配置,因为操作的业务场景不一样,提示的信息肯定也会不一样

      4  遮罩图片可配置,

      5 信息提示层大小可配置

百度网盘下载demo:链接:http://pan.baidu.com/s/1i3eMUHZ 密码:gaud


需要了解的知识点大致如下

    1 z-index属性

    2 position属性

    3 浏览器窗口与document 高宽的计算

    4 jquery 插件格式

    5 css 滤镜效果


为了减少引入的文件索性将css直接写在js中了

插件代码:

/**************************
*Desc:提交操作时遮罩
*Argument:type=0 全屏遮 1局部遮
*Author:Zery-Zhang
*Date:2014-09-18
*Version:1.0.0
**************************/
; (function ($) { 
    $.fn.jqLoading =function(option) {
        var defaultVal = {
            backgroudColor: "#ECECEC",//背景色
            backgroundImage: "../image/loading.gif",//背景图片
            text: "玩命加载中....",//文字 
            width: 150,//宽度
            height: 60,//高度
            type:0 //0全部遮,1 局部遮
            
        };
        var opt = $.extend({}, defaultVal, option);
        if (opt.type == 0) {
            //全屏遮
            openLayer();
        } else {
            //局部遮(当前对象应为需要被遮挡的对象)
            openPartialLayer(this);
        }
        
        //销毁对象
        if (option === "destroy") {
            closeLayer();
        }
        
        //设置背景层高
        function height () {
            var scrollHeight, offsetHeight;
            // handle IE 6
            if ($.browser.msie && $.browser.version < 7) {
                scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
                offsetHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
                if (scrollHeight < offsetHeight) {
                    return $(window).height();
                } else {
                    return scrollHeight;
                }
                // handle "good" browsers
            }
            else if ($.browser.msie && $.browser.version == 8) {
                return $(document).height() - 4;
            }
            else {
                return $(document).height();
            }
        };
        
        //设置背景层宽
        function width() {
            var scrollWidth, offsetWidth;
            // handle IE
            if ($.browser.msie) {
                scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
                offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth);
                if (scrollWidth < offsetWidth) {
                    return $(window).width();
                } else {
                    return scrollWidth;
                }
                // handle "good" browsers
            }
            else {
                return $(document).width();
            }
        };
        
        /*==========全部遮罩=========*/
        function openLayer() {
            //背景遮罩层
            var layer = $("<div id='layer'></div>");
            layer.css({
                zIndex:9998,
                position: "absolute",
                height: height() + "px",
                width: width() + "px",
                background: "black",
                top: 0,
                left: 0,
                filter: "alpha(opacity=30)",
                opacity: 0.3
              
            });
           
           //图片及文字层
            var content = $("<div id='content'></div>");
            content.css({
                textAlign: "left",
                position:"absolute",
                zIndex: 9999,
                height: opt.height + "px",
                width: opt.width + "px",
                top: "50%",
                left: "50%",
                verticalAlign: "middle",
                background: opt.backgroudColor,
                borderRadius:"8px",
                fontSize:"13px"
            });
            
            content.append("<img style='vertical-align:middle;margin:"+(opt.height/4)+"px; 0 0 5px;margin-right:5px;' src='" + opt.backgroundImage + "' /><span style='text-align:center; vertical-align:middle;'>" + opt.text + "</span>");
            $("body").append(layer).append(content);
            var top = content.css("top").replace('px','');
            var left = content.css("left").replace('px','');
            content.css("top",(parseFloat(top)-opt.height/2)).css("left",(parseFloat(left)-opt.width/2));
            
           return this;
        }
        //销毁对象
        function closeLayer() {
            $("#layer,#content,#partialLayer").remove();
            return this;
        }
        
        /*==========局部遮罩=========*/
        function openPartialLayer(obj) {
         
            var eheight = $(obj).css("height");//元素带px的高宽度
            var ewidth = $(obj).css("width");
            var top = $(obj).offset().top; // 元素在文档中位置 滚动条不影响
            var left = $(obj).offset().left;
            var layer = $("<div id='partialLayer'></div>");
            layer.css({
                style: 'z-index:9998',
                position: "absolute",
                height: eheight,
                width: ewidth,
                background: "black",
                top: top,
                left: left,
                filter: "alpha(opacity=60)",
                opacity: 0.6,
                borderRadius:"3px",
                dispaly: "block"
            });
            $("body").append(layer);
            return this;
        }
    };
    
})(jQuery)

 jQuery 1.9较之前版本的变化,主要介绍移除方法的替代方法:.browser、.live、.die、.sub、.toggle 。如果是大家用的是jquery 1.9以后的版本请用下面的插件代码。

/**************************
*Desc:提交操作时遮罩
*Argument:type=0 全屏遮 1局部遮
*Author:Zery-Zhang
*Date:2014-09-18
*Version:1.0.0
**************************/
; (function ($) { 
    $.fn.jqLoading =function(option) {
        var defaultVal = {
            backgroudColor: "#ECECEC",//背景色
            backgroundImage: "../../JScripts/Load/image/loading.gif",//背景图片
            text: "正在加载中,请耐心等待....",//文字 
            width: 150,//宽度
            height: 60,//高度
            type:0 //0全部遮,1 局部遮
            
        };
        var opt = $.extend({}, defaultVal, option);
        if (opt.type == 0) {
            //全屏遮
            openLayer();
        } else {
            //局部遮(当前对象应为需要被遮挡的对象)
            openPartialLayer(this);
        }
        
        //销毁对象
        if (option === "destroy") {
            closeLayer();
        }
        
        //设置背景层高
        function height () {
            var scrollHeight, offsetHeight;
            // handle IE 6
            if ($.support.boxModel && $.support.leadingWhitespace) {
                scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
                offsetHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
                if (scrollHeight < offsetHeight) {
                    return $(window).height();
                } else {
                    return scrollHeight;
                }
                // handle "good" browsers
            }
            else if ($.support.objectAll) {
                return $(document).height() - 4;
            }
            else {
                return $(document).height()+500;
            }
        };
        
        //设置背景层宽
        function width() {
            var scrollWidth, offsetWidth;
            // handle IE
            if ($.support.boxModel) {
                scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
                offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth);
                if (scrollWidth < offsetWidth) {
                    return $(window).width();
                } else {
                    return scrollWidth;
                }
                // handle "good" browsers
            }
            else {
                return $(document).width();
            }
        };
        
        /*==========全部遮罩=========*/
        function openLayer() {
            //背景遮罩层
            var layer = $("<div id='layer'></div>");
            layer.css({
                zIndex:9998,
                position: "absolute",
                height: height() + "px",
                width: width() + "px",
                background: "black",
                top: 0,
                left: 0,
                filter: "alpha(opacity=30)",
                opacity: 0.3
              
            });
           
           //图片及文字层
            var content = $("<div id='content'></div>");
            content.css({
                textAlign: "left",
                position:"absolute",
                zIndex: 9999,
                height: opt.height + "px",
                width: opt.width + "px",
                top: "50%",
                left: "50%",
                verticalAlign: "middle",
                background: opt.backgroudColor,
                borderRadius:"8px",
                fontSize:"13px"
            });
            
            content.append("<img style='vertical-align:middle;margin:"+(opt.height/4)+"px; 0 0 5px;margin-right:5px;' src='" + opt.backgroundImage + "' /><span style='text-align:center; vertical-align:middle;'>" + opt.text + "</span>");
            $("body").append(layer).append(content);
            var top = content.css("top").replace('px','');
            var left = content.css("left").replace('px','');
            content.css("top",(parseFloat(top)-opt.height/2)).css("left",(parseFloat(left)-opt.width/2));
            
           return this;
        }
        //销毁对象
        function closeLayer() {
            $("#layer,#content,#partialLayer").remove();
            return this;
        }
        
        /*==========局部遮罩=========*/
        function openPartialLayer(obj) {
         
            var eheight = $(obj).css("height");//元素带px的高宽度
            var ewidth = $(obj).css("width");
            var top = $(obj).offset().top; // 元素在文档中位置 滚动条不影响
            var left = $(obj).offset().left;
            var layer = $("<div id='partialLayer'></div>");
            layer.css({
                style: 'z-index:9998',
                position: "absolute",
                height: eheight,
                width: ewidth,
                background: "black",
                top: top,
                left: left,
                filter: "alpha(opacity=60)",
                opacity: 0.6,
                borderRadius:"3px",
                dispaly: "block"
            });
            $("body").append(layer);
            return this;
        }
    };
    
})(jQuery)

引用js:

  <script src="../Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-ui-jqLoding.js" type="text/javascript"></script>

调用:

<body>
    <input type="button" id="btnOpen2" value="打开全局" />
    <input type="button" id="btnClose2" value="关闭全局" />
    <script type="text/javascript">
        $(function () {
            $("#btnOpen2").on("click", function () {
                $.fn.jqLoading({ height: 100, width: 240, text: "正在加载中,请耐心等待...." });
                setTimeout(function () {
                    $.fn.jqLoading("destroy");
                }, 3000);
            });
        })
    </script>
    <input type="button" id="btnOpen" value="遮罩我" />
    <input type="button" id="btnClose" value="关闭" />
    <script type="text/javascript">
        $(function () {
            $("#btnOpen").on("click", function () {
                //全局
                //$(this).jqLoading();
                //局部
                $(this).jqLoading({ type: 1 });
            });
            $("#btnClose").on("click", function () {
                $(this).jqLoading("destroy");
            });
        })</script>
</body>



我们可以在项目中,定义一个全局的ajax请求监控函数,在发起ajax请求的时候,自动启用遮罩层,等待界面所有ajax请求结束,则关闭遮罩层。这个功能我以前有写过一个文章。参考:[Jquery $.ajax请求详解及ajax全局变量分析]


参考:

[asp.net+jquery.upload实现多文件上传+进度条加遮罩层]

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


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

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

给您更多信息和帮助

在这里您可以找到更多:

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

投稿:suchso@vip.qq.com

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

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

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

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

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