【改编】loading组件
/** * Copyright (c) 2009 Sergiy Kovalchuk ([email protected]) * * 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/) * */ ;(function($){ /** * Displays loading mask over selected element. * * @param label Text message that will be displayed on the top of a mask besides a spinner (optional). * If not provided only mask will be displayed without a label or a spinner. */ $.fn.mask = function(label){ this.unmask(); if(this.css("position") == "static") { this.addClass("masked-relative"); } this.addClass("masked"); var maskDiv = $('<div class="loadmask"></div>'); //auto height fix for IE if(navigator.userAgent.toLowerCase().indexOf("msie") > -1){ maskDiv.height(this.height() + parseInt(this.css("padding-top")) + parseInt(this.css("padding-bottom"))); maskDiv.width(this.width() + parseInt(this.css("padding-left")) + parseInt(this.css("padding-right"))); } //fix for z-index bug with selects in IE6 if(navigator.userAgent.toLowerCase().indexOf("msie 6") > -1){ this.find("select").addClass("masked-hidden"); } this.append(maskDiv); if(typeof label == "string") { var maskMsgDiv = $('<div class="loadmask-msg" style="display:none;"></div>'); maskMsgDiv.append('<div>' + label + '</div>'); this.append(maskMsgDiv); //calculate center position maskMsgDiv.css("top", Math.round(this.height() / 2 - (maskMsgDiv.height() - parseInt(maskMsgDiv.css("padding-top")) - parseInt(maskMsgDiv.css("padding-bottom"))) / 2)+"px"); maskMsgDiv.css("left", Math.round(this.width() / 2 - (maskMsgDiv.width() - parseInt(maskMsgDiv.css("padding-left")) - parseInt(maskMsgDiv.css("padding-right"))) / 2)+"px"); maskMsgDiv.show(); } }; /** * Removes mask from the element. */ $.fn.unmask = function(label){ this.find(".loadmask-msg,.loadmask").remove(); this.removeClass("masked"); this.removeClass("masked-relative"); this.find("select").removeClass("masked-hidden"); }; })(jQuery);
css
.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;
}
示例代码：
<!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.pack.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>