123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250 |
-
- 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></div>');
- var overlayDiv = jQuery('<div></div>');
-
-
-
- if ( settings.indicatorID ) {
- indicatorID = settings.indicatorID;
- }
- else {
- indicatorID = jQuery(this).attr('id');
- }
-
- jQuery(loadingDiv).attr('id', 'loading-indicator-' + indicatorID );
- jQuery(loadingDiv).addClass('loading-indicator');
-
- if ( settings.addClass ){
- jQuery(loadingDiv).addClass(settings.addClass);
- }
-
-
-
-
- jQuery(overlayDiv).css('display', 'none');
-
-
- jQuery(document.body).append(overlayDiv);
-
-
-
-
- jQuery(overlayDiv).attr('id', 'loading-indicator-' + indicatorID + '-overlay');
-
- jQuery(overlayDiv).addClass('loading-indicator-overlay');
-
- if ( settings.addClass ){
- jQuery(overlayDiv).addClass(settings.addClass + '-overlay');
- }
-
-
-
-
-
- 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');
-
-
-
-
-
- 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);
- 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);
-
-
-
- if ( settings.overlayCSS ) {
- jQuery(overlayDiv).css ( settings.overlayCSS );
- }
-
-
-
-
- jQuery(loadingDiv).css('display', 'none');
- jQuery(document.body).append(loadingDiv);
-
- jQuery(loadingDiv).css('position', 'absolute');
- jQuery(loadingDiv).css('z-index', settings.indicatorZIndex);
-
-
-
- var indicatorTop = overlay_top_pos;
-
- if ( settings.marginTop ) {
- indicatorTop += parseInt(settings.marginTop);
- }
-
- var indicatorLeft = overlay_left_pos;
-
- if ( settings.marginLeft ) {
- indicatorLeft += parseInt(settings.marginTop);
- }
-
-
-
-
-
- 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');
- }
-
-
-
- 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' );
- }
-
-
-
-
-
- if ( settings.css ) {
- jQuery(loadingDiv).css ( settings.css );
- }
-
-
-
-
- var callback_options =
- {
- 'overlay': overlayDiv,
- 'indicator': loadingDiv,
- 'element': this
- };
-
-
-
-
- if ( typeof(settings.beforeShow) == 'function' ) {
- settings.beforeShow( callback_options );
- }
-
-
-
-
- jQuery(overlayDiv).show();
-
-
-
-
- jQuery(loadingDiv).show();
-
-
-
- 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;
- };
|