【改编】loading组件

来源：互联网发布：hp软件编辑：程序博客网时间：2024/04/27 03:51

/** * 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/) * */;(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 IEif(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 IE6if(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 positionmaskMsgDiv.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>