jquery.showLoading.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. /*
  2. * jQuery showLoading plugin v1.0
  3. *
  4. * Copyright (c) 2009 Jim Keller
  5. * Context - http://www.contextllc.com
  6. *
  7. * Dual licensed under the MIT and GPL licenses.
  8. *
  9. */
  10. jQuery.fn.showLoading = function(options) {
  11. var indicatorID;
  12. var settings = {
  13. 'addClass': '',
  14. 'beforeShow': '',
  15. 'afterShow': '处理中请稍后。。。',
  16. 'hPos': 'center',
  17. 'vPos': 'center',
  18. 'indicatorZIndex' : 5001,
  19. 'overlayZIndex': 5000,
  20. 'parent': '',
  21. 'marginTop': 0,
  22. 'marginLeft': 0,
  23. 'overlayWidth': null,
  24. 'overlayHeight': null
  25. };
  26. jQuery.extend(settings, options);
  27. var loadingDiv = jQuery('<div></div>');
  28. var overlayDiv = jQuery('<div></div>');
  29. //
  30. // Set up ID and classes
  31. //
  32. if ( settings.indicatorID ) {
  33. indicatorID = settings.indicatorID;
  34. }
  35. else {
  36. indicatorID = jQuery(this).attr('id');
  37. }
  38. jQuery(loadingDiv).attr('id', 'loading-indicator-' + indicatorID );
  39. jQuery(loadingDiv).addClass('loading-indicator');
  40. if ( settings.addClass ){
  41. jQuery(loadingDiv).addClass(settings.addClass);
  42. }
  43. //
  44. // Create the overlay
  45. //
  46. jQuery(overlayDiv).css('display', 'none');
  47. // Append to body, otherwise position() doesn't work on Webkit-based browsers
  48. jQuery(document.body).append(overlayDiv);
  49. //
  50. // Set overlay classes
  51. //
  52. jQuery(overlayDiv).attr('id', 'loading-indicator-' + indicatorID + '-overlay');
  53. jQuery(overlayDiv).addClass('loading-indicator-overlay');
  54. if ( settings.addClass ){
  55. jQuery(overlayDiv).addClass(settings.addClass + '-overlay');
  56. }
  57. //
  58. // Set overlay position
  59. //
  60. var overlay_width;
  61. var overlay_height;
  62. var border_top_width = jQuery(this).css('border-top-width');
  63. var border_left_width = jQuery(this).css('border-left-width');
  64. //
  65. // IE will return values like 'medium' as the default border,
  66. // but we need a number
  67. //
  68. border_top_width = isNaN(parseInt(border_top_width)) ? 0 : border_top_width;
  69. border_left_width = isNaN(parseInt(border_left_width)) ? 0 : border_left_width;
  70. var overlay_left_pos = jQuery(this).offset().left + parseInt(border_left_width);
  71. var overlay_top_pos = jQuery(this).offset().top + parseInt(border_top_width);
  72. if ( settings.overlayWidth !== null ) {
  73. overlay_width = settings.overlayWidth;
  74. }
  75. else {
  76. overlay_width = parseInt(jQuery(this).width()) + parseInt(jQuery(this).css('padding-right')) + parseInt(jQuery(this).css('padding-left'));
  77. }
  78. if ( settings.overlayHeight !== null ) {
  79. overlay_height = settings.overlayWidth;
  80. }
  81. else {
  82. overlay_height = parseInt(jQuery(this).height()) + parseInt(jQuery(this).css('padding-top')) + parseInt(jQuery(this).css('padding-bottom'));
  83. }
  84. jQuery(overlayDiv).css('width', overlay_width.toString() + 'px');
  85. jQuery(overlayDiv).css('height', overlay_height.toString() + 'px');
  86. jQuery(overlayDiv).css('left', overlay_left_pos.toString() + 'px');
  87. jQuery(overlayDiv).css('position', 'absolute');
  88. jQuery(overlayDiv).css('top', overlay_top_pos.toString() + 'px' );
  89. jQuery(overlayDiv).css('z-index', settings.overlayZIndex);
  90. //
  91. // Set any custom overlay CSS
  92. //
  93. if ( settings.overlayCSS ) {
  94. jQuery(overlayDiv).css ( settings.overlayCSS );
  95. }
  96. //
  97. // We have to append the element to the body first
  98. // or .width() won't work in Webkit-based browsers (e.g. Chrome, Safari)
  99. //
  100. jQuery(loadingDiv).css('display', 'none');
  101. jQuery(document.body).append(loadingDiv);
  102. jQuery(loadingDiv).css('position', 'absolute');
  103. jQuery(loadingDiv).css('z-index', settings.indicatorZIndex);
  104. //
  105. // Set top margin
  106. //
  107. var indicatorTop = overlay_top_pos;
  108. if ( settings.marginTop ) {
  109. indicatorTop += parseInt(settings.marginTop);
  110. }
  111. var indicatorLeft = overlay_left_pos;
  112. if ( settings.marginLeft ) {
  113. indicatorLeft += parseInt(settings.marginTop);
  114. }
  115. //
  116. // set horizontal position
  117. //
  118. if ( settings.hPos.toString().toLowerCase() == 'center' ) {
  119. jQuery(loadingDiv).css('left', (indicatorLeft + ((jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width())) / 2)).toString() + 'px');
  120. }
  121. else if ( settings.hPos.toString().toLowerCase() == 'left' ) {
  122. jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(jQuery(overlayDiv).css('margin-left'))).toString() + 'px');
  123. }
  124. else if ( settings.hPos.toString().toLowerCase() == 'right' ) {
  125. jQuery(loadingDiv).css('left', (indicatorLeft + (jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width()))).toString() + 'px');
  126. }
  127. else {
  128. jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(settings.hPos)).toString() + 'px');
  129. }
  130. //
  131. // set vertical position
  132. //
  133. if ( settings.vPos.toString().toLowerCase() == 'center' ) {
  134. jQuery(loadingDiv).css('top', (indicatorTop + ((jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height())) / 2)).toString() + 'px');
  135. }
  136. else if ( settings.vPos.toString().toLowerCase() == 'top' ) {
  137. jQuery(loadingDiv).css('top', indicatorTop.toString() + 'px');
  138. }
  139. else if ( settings.vPos.toString().toLowerCase() == 'bottom' ) {
  140. jQuery(loadingDiv).css('top', (indicatorTop + (jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height()))).toString() + 'px');
  141. }
  142. else {
  143. jQuery(loadingDiv).css('top', (indicatorTop + parseInt(settings.vPos)).toString() + 'px' );
  144. }
  145. //
  146. // Set any custom css for loading indicator
  147. //
  148. if ( settings.css ) {
  149. jQuery(loadingDiv).css ( settings.css );
  150. }
  151. //
  152. // Set up callback options
  153. //
  154. var callback_options =
  155. {
  156. 'overlay': overlayDiv,
  157. 'indicator': loadingDiv,
  158. 'element': this
  159. };
  160. //
  161. // beforeShow callback
  162. //
  163. if ( typeof(settings.beforeShow) == 'function' ) {
  164. settings.beforeShow( callback_options );
  165. }
  166. //
  167. // Show the overlay
  168. //
  169. jQuery(overlayDiv).show();
  170. //
  171. // Show the loading indicator
  172. //
  173. jQuery(loadingDiv).show();
  174. //
  175. // afterShow callback
  176. //
  177. if ( typeof(settings.afterShow) == 'function' ) {
  178. settings.afterShow( callback_options );
  179. }
  180. return this;
  181. };
  182. jQuery.fn.hideLoading = function(options) {
  183. var settings = {};
  184. jQuery.extend(settings, options);
  185. if ( settings.indicatorID ) {
  186. indicatorID = settings.indicatorID;
  187. }
  188. else {
  189. indicatorID = jQuery(this).attr('id');
  190. }
  191. jQuery(document.body).find('#loading-indicator-' + indicatorID ).remove();
  192. jQuery(document.body).find('#loading-indicator-' + indicatorID + '-overlay' ).remove();
  193. return this;
  194. };