根据项目需要,定制了个加载遮罩插件,
要求:IE7+(IE6 fixed问题没考虑),但是项目中是IE8+,使用了Font-Awesome图标而已
/*********************CSS***************/ .mask-hidden { overflow: hidden !important; } .mask-relative { position: relative; } .mask-backdrop { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000; background-color: #ccc; opacity: 0.5; filter: alpha(opacity = 50); } .mask-icon { position: absolute; z-index: 1001; top: 0; left: 0; cursor: wait; } .mask-backdrop-fixed { position: fixed; z-index: 999999999; } .mask-icon-fixed { position: fixed; z-index: 999999999; }
; (function($) { // 需要调整大小的遮罩元素 var $MASK_ELEMENTS = []; // 窗口调整大小定时器 var MASK_RESIZE_TIMER; $(window).on("resize.mask", function() { MASK_RESIZE_TIMER && clearTimeout(MASK_RESIZE_TIMER); MASK_RESIZE_TIMER = setTimeout(function() { var $body = $(document.body); if ($body.hasClass("mask")) setIconPosition($body, $body.find("> .mask-icon")); for (var i = 0, l = $MASK_ELEMENTS.length; i < l; i++) { var $ele = $MASK_ELEMENTS[i]; var $maskEle = $ele; if (!$ele.hasClass("mask")) { $maskEle = $ele.parent(); $maskEle.css({ width : "", height : "" }); $maskEle.width($ele.outerWidth()); $maskEle.height($ele.outerHeight()); } setIconPosition($maskEle, $maskEle.find("> .mask-icon")); } }, 20); }); function elementNeedWrap($ele) { var tagName = $ele[0].tagName; if (tagName == 'TABLE') return true; return false; } function getMaskCntRect($ele) { if ($ele[0].tagName == 'BODY') { var width = window.innerWidth, height = window.innerHeight; if (typeof width != 'number') {// IE 5/6/7/8 if (document.compatMode == 'CSS1Compat') { width = document.documentElement.clientWidth; height = document.docuementElement.clientHeight; } else { width = document.body.clientWidth; height = document.body.clientHeight; } } return { width : width, height : height }; } return { height : $ele.outerHeight(), width : $ele.outerWidth() }; } function setIconPosition($maskEle, $icon) { var windowRect = getMaskCntRect($maskEle); var width = windowRect.width, height = windowRect.height; var iheight = $icon.outerHeight(), iwidth = $icon.outerWidth(); var top = (height - iheight) / 2, left = (width - iwidth) / 2; $icon.css({ top : top + "px", left : left + "px" }); } // DIV等容器性元素 function maskElement($ele, options) { if ($ele[0].tagName == 'BODY') return maskBody($ele, options); var maskCount = ($ele.data("masked") || 0) + 1; $ele.data("masked", maskCount); // 已经开启遮罩了, if (maskCount > 1) return; options.iconCls = options.iconCls || "fa fa-spinner fa-spin fa-3x"; var $maskEle = $ele; $MASK_ELEMENTS.push($ele); if (elementNeedWrap($ele)) { $maskEle = $ele.wrap('<div></div>').parent(); $maskEle.width($ele.outerWidth()); $maskEle.height($ele.outerHeight()); } $maskEle.addClass("mask mask-hidden"); $maskEle.css("position") == 'static' && $maskEle.addClass("mask-relative"); var $mask = $('<div class="mask-backdrop"></div>').appendTo($maskEle); var $icon = $('<i class="mask-icon ' + options.iconCls + '"></i>') .appendTo($maskEle); setIconPosition($maskEle, $icon); } function unMaskElement($ele) { if ($ele[0].tagName == 'BODY') return unMaskBody($ele); var maskCount = ($ele.data("masked") || 0) - 1; // 从来没遮罩过 if (maskCount > 0) return $ele.data("masked",maskCount); $ele.removeData("masked"); var $maskEle = $ele.hasClass("mask") ? $ele : $ele.parent(); $maskEle.removeClass("mask mask-relative mask-hidden"); $maskEle.find("> .mask-backdrop").remove(); $maskEle.find("> .mask-icon").remove(); // 窗口缩放监听从数组中移除出去 for (var i = 0, l = $MASK_ELEMENTS.length; i < l; i++) if ($MASK_ELEMENTS[i].get(0) == $maskEle[0]) $MASK_ELEMENTS.splice(i, 1); } function maskBody($ele, options) { if ($ele[0].tagName != 'BODY') return maskElement($ele, options); var maskCount = ($ele.data("masked") || 0) + 1; $ele.data("masked", maskCount); // 已经开启遮罩了, if (maskCount > 1) return; options.iconCls = options.iconCls || "fa fa-spinner fa-spin fa-5x"; var $maskEle = $ele.addClass("mask"); var $mask = $('<div class="mask-backdrop mask-backdrop-fixed"></div>') .appendTo($maskEle); var $icon = $( '<i class="mask-icon mask-icon-fixed ' + options.iconCls + '"></i>').appendTo($maskEle); setIconPosition($maskEle, $icon); } function unMaskBody($ele) { if ($ele[0].tagName != 'BODY') return unMaskElement($ele); var maskCount = ($ele.data("masked") || 0) - 1; // 从来没遮罩过 if (maskCount > 0) return $ele.data("masked",maskCount); var $maskEle = $ele.removeData("masked"); $maskEle.removeClass("mask"); $maskEle.find("> .mask-backdrop").remove(); $maskEle.find("> .mask-icon").remove(); } /** * Displays loading mask over selected element(s). Accepts both single and * multiple selectors. * * @param label * Text message that will be displayed on top of the mask besides * a spinner (optional). If not provided only mask will be * displayed without a label or a spinner. * @param delay * Delay in milliseconds before element is masked (optional). If * unmask() is called before the delay times out, no mask is * displayed. This can be used to prevent unnecessary mask * display for quick processes. */ $.fn.mask = function(options) { options = options || {}; $(this).each(function() { maskElement($(this), options); }); }; $.fn.unmask = function() { $(this).each(function() { unMaskElement($(this)); }); }; $.fn.isMasked = function() { return (this.data("masked") || 0) > 1; }; })(jQuery);