123 lines
4.1 KiB
JavaScript
123 lines
4.1 KiB
JavaScript
|
|
/**
|
|
* Copyright (c) 2009 Sergiy Kovalchuk (serg472@gmail.com)
|
|
*
|
|
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
|
|
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
|
|
*
|
|
* Following code is based on Element.mask() implementation from ExtJS framework (http://extjs.com/)
|
|
*
|
|
蜗牛修改版,QQ:672308444
|
|
新增功能及改动：
|
|
$("#info").mask("Loading",2000);//遮罩出现2秒后消失
|
|
$("#info").mask("Loading",-2000);//遮罩延迟2秒后出现
|
|
$("#info").mask("Loading",-2000,3000);//遮罩延迟2秒后出现,然后3秒后消失
|
|
*/
|
|
|
|
(function($){
|
|
|
|
/**
|
|
* 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(label, delay,showtime){
|
|
$(this).each(function() {
|
|
if(delay !== undefined) {
|
|
var element = $(this);
|
|
if(delay < 0){
|
|
element.data("_mask_timeout", setTimeout(function() {
|
|
$.maskElement(element, label);
|
|
if(showtime>0){setTimeout(function(){$.unmaskElement(element);},showtime);}
|
|
}, delay*-1));
|
|
}else if(delay > 0){
|
|
$.maskElement(element, label);
|
|
setTimeout(function(){$.unmaskElement(element);},delay);
|
|
}
|
|
} else {
|
|
$.maskElement($(this), label);
|
|
}
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Removes mask from the element(s). Accepts both single and multiple selectors.
|
|
*/
|
|
$.fn.unmask = function(){
|
|
$(this).each(function() {
|
|
$.unmaskElement($(this));
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Checks if a single element is masked. Returns false if mask is delayed or not displayed.
|
|
*/
|
|
$.fn.isMasked = function(){
|
|
return this.hasClass("masked");
|
|
};
|
|
|
|
$.maskElement = function(element, label){
|
|
|
|
//if this element has delayed mask scheduled then remove it and display the new one
|
|
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>');
|
|
|
|
//auto height fix for IE
|
|
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")));
|
|
}
|
|
|
|
//fix for z-index bug with selects in IE6
|
|
if(navigator.userAgent.toLowerCase().indexOf("msie 6") > -1){
|
|
element.find("select").addClass("masked-hidden");
|
|
}
|
|
|
|
element.append(maskDiv);
|
|
|
|
if(label !== undefined) {
|
|
var maskMsgDiv = $('<div class="loadmask-msg" style="display:none;"></div>');
|
|
maskMsgDiv.append('<div>' + label + '</div>');
|
|
element.append(maskMsgDiv);
|
|
|
|
//calculate center position
|
|
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 this element has delayed mask scheduled then remove it
|
|
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); |