jquery.loadmask.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. /**
  2. * Copyright (c) 2009 Sergiy Kovalchuk (serg472@gmail.com)
  3. *
  4. * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
  5. * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
  6. *
  7. * Following code is based on Element.mask() implementation from ExtJS framework (http://extjs.com/)
  8. *
  9. */
  10. ;(function($){
  11. /**
  12. * Displays loading mask over selected element(s). Accepts both single and multiple selectors.
  13. *
  14. * @param label Text message that will be displayed on top of the mask besides a spinner (optional).
  15. * If not provided only mask will be displayed without a label or a spinner.
  16. * @param delay Delay in milliseconds before element is masked (optional). If unmask() is called
  17. * before the delay times out, no mask is displayed. This can be used to prevent unnecessary
  18. * mask display for quick processes.
  19. */
  20. $.fn.mask = function(label, delay){
  21. $(this).each(function() {
  22. if(delay !== undefined && delay > 0) {
  23. var element = $(this);
  24. element.data("_mask_timeout", setTimeout(function() { $.maskElement(element, label)}, delay));
  25. } else {
  26. $.maskElement($(this), label);
  27. }
  28. });
  29. };
  30. /**
  31. * Removes mask from the element(s). Accepts both single and multiple selectors.
  32. */
  33. $.fn.unmask = function(){
  34. $(this).each(function() {
  35. $.unmaskElement($(this));
  36. });
  37. };
  38. /**
  39. * Checks if a single element is masked. Returns false if mask is delayed or not displayed.
  40. */
  41. $.fn.isMasked = function(){
  42. return this.hasClass("masked");
  43. };
  44. $.maskElement = function(element, label){
  45. //if this element has delayed mask scheduled then remove it and display the new one
  46. if (element.data("_mask_timeout") !== undefined) {
  47. clearTimeout(element.data("_mask_timeout"));
  48. element.removeData("_mask_timeout");
  49. }
  50. if(element.isMasked()) {
  51. $.unmaskElement(element);
  52. }
  53. if(element.css("position") == "static") {
  54. element.addClass("masked-relative");
  55. }
  56. element.addClass("masked");
  57. var maskDiv = $('<div class="loadmask"></div>');
  58. //auto height fix for IE
  59. if(navigator.userAgent.toLowerCase().indexOf("msie") > -1){
  60. maskDiv.height(element.height() + parseInt(element.css("padding-top")) + parseInt(element.css("padding-bottom")));
  61. maskDiv.width(element.width() + parseInt(element.css("padding-left")) + parseInt(element.css("padding-right")));
  62. }
  63. //fix for z-index bug with selects in IE6
  64. if(navigator.userAgent.toLowerCase().indexOf("msie 6") > -1){
  65. element.find("select").addClass("masked-hidden");
  66. }
  67. element.append(maskDiv);
  68. if(label !== undefined) {
  69. var maskMsgDiv = $('<div class="loadmask-msg" style="display:none;"></div>');
  70. maskMsgDiv.append('<div>' + label + '</div>');
  71. element.append(maskMsgDiv);
  72. var myTop = element.scrollTop+300;//(window.screen.availHeight-arrayPageSize[3])/2;
  73. var myLeft = Math.round(element.width() / 2 - (maskMsgDiv.width() - parseInt(maskMsgDiv.css("padding-left")) - parseInt(maskMsgDiv.css("padding-right"))) / 2);
  74. maskMsgDiv.css("top", myTop +"px");
  75. maskMsgDiv.css("left", myLeft +"px");
  76. maskMsgDiv.show();
  77. }
  78. };
  79. $.unmaskElement = function(element){
  80. //if this element has delayed mask scheduled then remove it
  81. if (element.data("_mask_timeout") !== undefined) {
  82. clearTimeout(element.data("_mask_timeout"));
  83. element.removeData("_mask_timeout");
  84. }
  85. element.find(".loadmask-msg,.loadmask").remove();
  86. element.removeClass("masked");
  87. element.removeClass("masked-relative");
  88. element.find("select").removeClass("masked-hidden");
  89. };
  90. })(jQuery);