update
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery LoadMask Demo</title>
|
||||
<link href="../jquery.loadmask.css" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script type='text/javascript' src='../jquery.loadmask.js'></script>
|
||||
<style>
|
||||
body{font-size:11px;font-family:tahoma;}
|
||||
#content { padding:5px;width:200px; }
|
||||
#buttons { padding-left:40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
Please fill out the form:
|
||||
<div id="content">
|
||||
<div>Field1: <input type="text"></div>
|
||||
<div>Field2: <input type="text"></div>
|
||||
<div>Field3: <input type="text"></div>
|
||||
<div>Field4: <input type="text"></div>
|
||||
</div>
|
||||
<div id="buttons">
|
||||
<input type="button" value="Process" id="process">
|
||||
<input type="button" value="Cancel" id="cancel">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("#process").bind("click", function () {
|
||||
$("#content").mask("Waiting...");
|
||||
});
|
||||
|
||||
$("#cancel").bind("click", function () {
|
||||
$("#content").unmask();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 771 B |
@@ -0,0 +1,40 @@
|
||||
.loadmask {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
-moz-opacity: 0.5;
|
||||
opacity: .50;
|
||||
filter: alpha(opacity=50);
|
||||
background-color: #CCC;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
zoom: 1;
|
||||
}
|
||||
.loadmask-msg {
|
||||
z-index: 20001;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border:1px solid #6593cf;
|
||||
background: #c3daf9;
|
||||
padding:2px;
|
||||
}
|
||||
.loadmask-msg div {
|
||||
padding:5px 10px 5px 25px;
|
||||
background: #fbfbfb url('images/loading.gif') no-repeat 5px 5px;
|
||||
line-height: 16px;
|
||||
border:1px solid #a3bad9;
|
||||
color:#222;
|
||||
font:normal 11px tahoma, arial, helvetica, sans-serif;
|
||||
cursor:wait;
|
||||
}
|
||||
.masked {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.masked-relative {
|
||||
position: relative !important;
|
||||
}
|
||||
.masked-hidden {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
|
||||
/**
|
||||
* 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);
|
||||
16
ebpm-process-manage/webapp/resource/js/plugins/loadmask/jquery.loadmask.min.js
vendored
Normal file
16
ebpm-process-manage/webapp/resource/js/plugins/loadmask/jquery.loadmask.min.js
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
* 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($){$.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);}});};$.fn.unmask=function(){$(this).each(function(){$.unmaskElement($(this));});};$.fn.isMasked=function(){return this.hasClass("masked");};$.maskElement=function(element,label){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>');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);if(label!==undefined){var maskMsgDiv=$('<div class="loadmask-msg" style="display:none;"></div>');maskMsgDiv.append('<div>'+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);
|
||||
Reference in New Issue
Block a user