jQuery遮罩插件

来源：互联网发布：上证指数月度数据下载编辑：程序博客网时间：2024/04/29 08:25

mask.js

//遮罩;(function($){    $.fn.mask = function(label, delay, loading, bgcolor){        $(this).each(function() {            if(loading==null){                loading=true;            }            var bgcolorValue="#cccccc";            if(bgcolor){                bgcolorValue=bgcolor;            }            if(delay !== undefined && delay > 0 && delay !=null) {                var element = $(this);                element.data("_mask_timeout", setTimeout(function() { $.maskElement(element, label ,loading, bgcolorValue)}, delay));            } else {                $.maskElement($(this), label, loading, bgcolorValue);            }        });    };    $.fn.unmask = function(){        $(this).each(function() {            $.unmaskElement($(this));        });    };    $.fn.isMasked = function(){        return this.hasClass("masked");    };    $.maskElement = function(element, label,loading ,bgcolor){        if (element.data("_mask_timeout") !== undefined) {            clearTimeout(element.data("_mask_timeout"));            element.removeData("_mask_timeout");        }        if(element.isMasked()) {            $.unmaskElement(element);        }        if(element.css("position") == "static") {            element.addClass("masked-relative");        }        element.addClass("masked");        var maskDiv = $('<div class="loadmask"></div>');        maskDiv.css({            "backgroundColor":bgcolor        })        if(navigator.userAgent.toLowerCase().indexOf("msie") > -1){            maskDiv.height(element.height() + parseInt(element.css("padding-top")) + parseInt(element.css("padding-bottom")));            maskDiv.width(element.width() + parseInt(element.css("padding-left")) + parseInt(element.css("padding-right")));        }        if(navigator.userAgent.toLowerCase().indexOf("msie 6") > -1){            element.find("select").addClass("masked-hidden");        }        element.append(maskDiv);        maskDiv.show();        if(label !== undefined&&label!=null) {            var maskMsgDiv = $('<div class="loadmask-msg" style="display:none;"></div>');            if(loading){                maskMsgDiv.append('<div class="mask_lading">' + label + '</div>');            }            else{                maskMsgDiv.append('<div  class="normal">' + label + '</div>');            }            element.append(maskMsgDiv);            maskMsgDiv.css("top", Math.round(element.height() / 2 - (maskMsgDiv.height() - parseInt(maskMsgDiv.css("padding-top")) - parseInt(maskMsgDiv.css("padding-bottom"))) / 2)+"px");            maskMsgDiv.css("left", Math.round(element.width() / 2 - (maskMsgDiv.width() - parseInt(maskMsgDiv.css("padding-left")) - parseInt(maskMsgDiv.css("padding-right"))) / 2)+"px");            maskMsgDiv.show();        }    };    $.unmaskElement = function(element){        if (element.data("_mask_timeout") !== undefined) {            clearTimeout(element.data("_mask_timeout"));            element.removeData("_mask_timeout");        }        element.find(".loadmask-msg,.loadmask").remove();        element.removeClass("masked");        element.removeClass("masked-relative");        element.find("select").removeClass("masked-hidden");    };})(jQuery);

loadmask.css

/*mask遮罩*/.loadmask {    z-index: 700;    position: absolute;    top: 0;    left: 0;    -moz-opacity: .4;    opacity: .40;    filter: alpha( opacity = 40);    width:100%;    height:100%;    zoom:1;    display:none;}.loadmask-msg {     z-index: 20001;     position: absolute;     top: 0;     left: 0;     border: 1px solid #6593cf;     background: #c3daf9;     padding: 2px; }.loadmask-msg .mask_lading {      padding: 5px 10px 5px 25px;      background: #fbfbfb url('images/loading3.gif') no-repeat 5px 5px;      line-height: 16px;      border: 1px solid #a3bad9;      color: #222;      cursor: wait;  }.loadmask-msg .normal {       padding: 5px 10px 5px 10px;       background-color: #fbfbfb;       line-height: 16px;       border: 1px solid #a3bad9;       color: #222;       display:block;   }.masked {        overflow: hidden !important;    }.masked-relative {         position: relative !important;     }.masked-hidden {          visibility: hidden !important;      }

loading3.gif

使用方法：

<script>function openMask1(){$("#content1").mask();}function closeMask1(){$("#content1").unmask();}function openMask2(){$("#content2").mask("当前不可用！",0,false);}function closeMask2(){$("#content2").unmask();}function openMask3(){$("#content3").mask(null,1000,false);}function closeMask3(){$("#content3").unmask();}function openMask4(){$("#content4").mask("正在加载中",null,true);}function closeMask4(){$("#content4").unmask();}function openMask5(){$("#content5").mask("当前不可用！",null,false,"#ffffff");}function closeMask5(){$("#content5").unmask();}</script>

0 0