1、意义
开发项目中，前台的页面要发请求到服务器，服务器响应请求返回数据到前台，这段时间，有可能因为返回的数据量较大导致前台页面出现短暂性的等待，此时如果用户因不知情而乱点击有可能造成逻辑混乱，所以此时需要在加载数据中将前台进行提示在加载数据中，利用jquery的遮罩组件可以完成这个功能需求。
2、实现步骤
（1）、下载 showLoading.css jquery.showLoading.min.js 两个文件。
（2）、在jsp中引入这两个文件
<link href="style/showLoading.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.showLoading.min.js"></script>
（3）、在异步请求中使用这个组件
function showloading(url,data){
$("body").showLoading();
$.ajax({
url:url,
data:data,
dataType:"json",
success:function(obj){
$("body").hideLoading();
}
});
}－－－－－－－－－－showLoading.css 代码－－－－－－－－－－－－－－－－
a { color: blue; cursor:pointer; text-decoration: underline;}
div.instructions_container { float: left; width: 350px; margin-right: 50px;
}
div#activity_pane { float:left; width: 350px; height: 200px; border: 1px solid #CCCCCC; font-weight:bold;">#EEEEEE; padding-top: 200px; text-align: center;
}
div.example_links.link_category { margin-bottom: 15px;}
.loading-indicator-bars { background-image: url('https://raw.githubusercontent.com/riverbed/flyscript-portal/master/thirdparty/showLoading/images/loading-bars.gif'); width: 150px;}
.loading-indicator { height: 80px; width: 80px; background: url( 'https://raw.githubusercontent.com/riverbed/flyscript-portal/master/thirdparty/showLoading/images/loading.gif' ); background-repeat: no-repeat; background-position: center center;}
.loading-indicator-overlay { font-weight:bold;">#FFFFFF; opacity: 0.6; filter: alpha(opacity = 60);}
－－－－－－－－－－－－－－－－－－－jquery.showLoading.js－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
/* * jQuery showLoading plugin v1.0 * * Copyright (c) 2009 Jim Keller * Context - http://www.contextllc.com * * Dual licensed under the MIT and GPL licenses. * * Modified by <cwhite@riverbed.com> to support displaying * percentage complete. */
jQuery.fn.setLoading = function(pct) { var indicatorID = jQuery(this).attr('id');
$('#loading-indicator-' + indicatorID).html(pct + '%');};
jQuery.fn.showLoading = function(options) {
var indicatorID; var settings = { 'addClass': '', 'beforeShow': '', 'afterShow': '', 'hPos': 'center', 'vPos': 'center', 'indicatorZIndex' : 5001, 'overlayZIndex': 5000, 'parent': '', 'marginTop': 0, 'marginLeft': 0, 'overlayWidth': null, 'overlayHeight': null };
jQuery.extend(settings, options);
var loadingDiv = jQuery('<div style="text-align:center"></div>'); var overlayDiv = jQuery('<div></div>');
// // Set up ID and classes // if ( settings.indicatorID ) { indicatorID = settings.indicatorID; } else { indicatorID = jQuery(this).attr('id'); }
//jQuery(this).resize(function(e) { // alert("Change event"); //});
jQuery(loadingDiv).attr('id', 'loading-indicator-' + indicatorID ); jQuery(loadingDiv).addClass('loading-indicator');
if ( settings.addClass ){ jQuery(loadingDiv).addClass(settings.addClass); }
// // Create the overlay // jQuery(overlayDiv).css('display', 'none');
// Append to body, otherwise position() doesn't work on Webkit-based browsers jQuery(document.body).append(overlayDiv);
// // Set overlay classes // jQuery(overlayDiv).attr('id', 'loading-indicator-' + indicatorID + '-overlay');
jQuery(overlayDiv).addClass('loading-indicator-overlay');
if ( settings.addClass ){ jQuery(overlayDiv).addClass(settings.addClass + '-overlay'); }
// // Set overlay position //
var overlay_width; var overlay_height;
var border_top_width = jQuery(this).css('border-top-width'); var border_left_width = jQuery(this).css('border-left-width');
// // IE will return values like 'medium' as the default border, // but we need a number // border_top_width = isNaN(parseInt(border_top_width)) ? 0 : border_top_width; border_left_width = isNaN(parseInt(border_left_width)) ? 0 : border_left_width;
var overlay_left_pos = jQuery(this).offset().left + parseInt(border_left_width);// + $(document.body).css( "border-left" ); var overlay_top_pos = jQuery(this).offset().top + parseInt(border_top_width);
if ( settings.overlayWidth !== null ) { overlay_width = settings.overlayWidth; } else { overlay_width = parseInt(jQuery(this).width()) + parseInt(jQuery(this).css('padding-right')) + parseInt(jQuery(this).css('padding-left')); }
if ( settings.overlayHeight !== null ) { overlay_height = settings.overlayWidth; } else { overlay_height = parseInt(jQuery(this).height()) + parseInt(jQuery(this).css('padding-top')) + parseInt(jQuery(this).css('padding-bottom')); }
jQuery(overlayDiv).css('width', overlay_width.toString() + 'px'); jQuery(overlayDiv).css('height', overlay_height.toString() + 'px');
jQuery(overlayDiv).css('left', overlay_left_pos.toString() + 'px'); jQuery(overlayDiv).css('position', 'absolute');
jQuery(overlayDiv).css('top', overlay_top_pos.toString() + 'px' ); jQuery(overlayDiv).css('z-index', settings.overlayZIndex);
// // Set any custom overlay CSS // if ( settings.overlayCSS ) { jQuery(overlayDiv).css ( settings.overlayCSS ); }
// // We have to append the element to the body first // or .width() won't work in Webkit-based browsers (e.g. Chrome, Safari) // jQuery(loadingDiv).css('display', 'none'); jQuery(document.body).append(loadingDiv);
jQuery(loadingDiv).css('position', 'absolute'); jQuery(loadingDiv).css('z-index', settings.indicatorZIndex);
// // Set top margin //
var indicatorTop = overlay_top_pos;
if ( settings.marginTop ) { indicatorTop += parseInt(settings.marginTop); }
var indicatorLeft = overlay_left_pos;
if ( settings.marginLeft ) { indicatorLeft += parseInt(settings.marginTop); }
// // set horizontal position // if ( settings.hPos.toString().toLowerCase() == 'center' ) { jQuery(loadingDiv).css('left', (indicatorLeft + ((jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width())) / 2)).toString() + 'px'); } else if ( settings.hPos.toString().toLowerCase() == 'left' ) { jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(jQuery(overlayDiv).css('margin-left'))).toString() + 'px'); } else if ( settings.hPos.toString().toLowerCase() == 'right' ) { jQuery(loadingDiv).css('left', (indicatorLeft + (jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width()))).toString() + 'px'); } else { jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(settings.hPos)).toString() + 'px'); }
// // set vertical position // if ( settings.vPos.toString().toLowerCase() == 'center' ) { jQuery(loadingDiv).css('top', (indicatorTop + ((jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height())) / 2)).toString() + 'px'); } else if ( settings.vPos.toString().toLowerCase() == 'top' ) { jQuery(loadingDiv).css('top', indicatorTop.toString() + 'px'); } else if ( settings.vPos.toString().toLowerCase() == 'bottom' ) { jQuery(loadingDiv).css('top', (indicatorTop + (jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height()))).toString() + 'px'); } else { jQuery(loadingDiv).css('top', (indicatorTop + parseInt(settings.vPos)).toString() + 'px' ); }
// // Set any custom css for loading indicator // if ( settings.css ) { jQuery(loadingDiv).css ( settings.css ); }
// // Set up callback options // var callback_options = { 'overlay': overlayDiv, 'indicator': loadingDiv, 'element': this };
// // beforeShow callback // if ( typeof(settings.beforeShow) == 'function' ) { settings.beforeShow( callback_options ); }
// // Show the overlay // jQuery(overlayDiv).show();
// // Show the loading indicator // jQuery(loadingDiv).show();
// // afterShow callback // if ( typeof(settings.afterShow) == 'function' ) { settings.afterShow( callback_options ); }
return this;};
jQuery.fn.hideLoading = function(options) {
var settings = {};
jQuery.extend(settings, options);
if ( settings.indicatorID ) { indicatorID = settings.indicatorID; } else { indicatorID = jQuery(this).attr('id'); }
jQuery(document.body).find('#loading-indicator-' + indicatorID ).remove(); jQuery(document.body).find('#loading-indicator-' + indicatorID + '-overlay' ).remove();
return this;};
jQuery(document).ready( function() {
// // When a user clicks the 'loading-default' link, // call showLoading on the activity pane // with default options // jQuery('a.loading-default').click(
function() { jQuery('#activity_pane').showLoading(); }
);
// // When a user clicks the 'loading-ajax' link, // call showLoading, sleep, then call hide loading // with default options // jQuery('a.loading-ajax').click(
function() {
jQuery('#activity_pane').showLoading( { 'afterShow': function() { setTimeout( "jQuery('#activity_pane').hideLoading()", 1000 ); }
} ); }
);
// // When a user clicks the 'loading-bars' link, // call showLoading with addClass specified // jQuery('a.loading-bars').click(
function() { jQuery('#activity_pane').showLoading( { 'addClass': 'loading-indicator-bars'
} ); }
);
// // When a user clicks the 'loading-hide' link, // call hideLoading on the activity pane // jQuery('a.loading-hide').click(
function() { jQuery('#activity_pane').hideLoading(); }
);
}
);