[Summary view] [Print] [Text view]

   1  /*

   2   * jQuery blockUI plugin

   3   * Version 1.33  (09/14/2007)

   4   * @requires jQuery v1.1.1

   5   *

   6   * $Id: jquery.blockUI.js 3291 2007-09-14 23:56:25Z malsup $

   7   *

   8   * Examples at: http://malsup.com/jquery/block/

   9   * Copyright (c) 2007 M. Alsup

  10   * Dual licensed under the MIT and GPL licenses:

  11   * http://www.opensource.org/licenses/mit-license.php

  12   * http://www.gnu.org/licenses/gpl.html

  13   */
  14   (function($) {
  15  /**

  16   * blockUI provides a mechanism for blocking user interaction with a page (or parts of a page).

  17   * This can be an effective way to simulate synchronous behavior during ajax operations without

  18   * locking the browser.  It will prevent user operations for the current page while it is

  19   * active ane will return the page to normal when it is deactivate.  blockUI accepts the following

  20   * two optional arguments:

  21   *

  22   *   message (String|Element|jQuery): The message to be displayed while the UI is blocked. The message

  23   *              argument can be a plain text string like "Processing...", an HTML string like

  24   *              "<h1><img src="busy.gif" /> Please wait...</h1>", a DOM element, or a jQuery object.

  25   *              The default message is "<h1>Please wait...</h1>"

  26   *

  27   *   css (Object):  Object which contains css property/values to override the default styles of

  28   *              the message.  Use this argument if you wish to override the default

  29   *              styles.  The css Object should be in a format suitable for the jQuery.css

  30   *              function.  For example:

  31   *              $.blockUI({

  32   *                    backgroundColor: '#ff8',

  33   *                    border: '5px solid #f00,

  34   *                    fontWeight: 'bold'

  35   *              });

  36   *

  37   * The default blocking message used when blocking the entire page is "<h1>Please wait...</h1>"

  38   * but this can be overridden by assigning a value to $.blockUI.defaults.pageMessage in your

  39   * own code.  For example:

  40   *

  41   *      $.blockUI.defaults.pageMessage = "<h1>Bitte Wartezeit</h1>";

  42   *

  43   * The default message styling can also be overridden.  For example:

  44   *

  45   *      $.extend($.blockUI.defaults.pageMessageCSS, { color: '#00a', backgroundColor: '#0f0' });

  46   *

  47   * The default styles work well for simple messages like "Please wait", but for longer messages

  48   * style overrides may be necessary.

  49   *

  50   * @example  $.blockUI();

  51   * @desc prevent user interaction with the page (and show the default message of 'Please wait...')

  52   *

  53   * @example  $.blockUI( { backgroundColor: '#f00', color: '#fff'} );

  54   * @desc prevent user interaction and override the default styles of the message to use a white on red color scheme

  55   *

  56   * @example  $.blockUI('Processing...');

  57   * @desc prevent user interaction and display the message "Processing..." instead of the default message

  58   *

  59   * @name blockUI

  60   * @param String|jQuery|Element message Message to display while the UI is blocked

  61   * @param Object css Style object to control look of the message

  62   * @cat Plugins/blockUI

  63   */
  64  $.blockUI = function(msg, css, opts) {
  65      $.blockUI.impl.install(window, msg, css, opts);
  66  };
  67  
  68  // expose version number so other plugins can interogate

  69  $.blockUI.version = 1.33;
  70  
  71  /**

  72   * unblockUI removes the UI block that was put in place by blockUI

  73   *

  74   * @example  $.unblockUI();

  75   * @desc unblocks the page

  76   *

  77   * @name unblockUI

  78   * @cat Plugins/blockUI

  79   */
  80  $.unblockUI = function(opts) {
  81      $.blockUI.impl.remove(window, opts);
  82  };
  83  
  84  /**

  85   * Blocks user interaction with the selected elements.  (Hat tip: Much of

  86   * this logic comes from Brandon Aaron's bgiframe plugin.  Thanks, Brandon!)

  87   * By default, no message is displayed when blocking elements.

  88   *

  89   * @example  $('div.special').block();

  90   * @desc prevent user interaction with all div elements with the 'special' class.

  91   *

  92   * @example  $('div.special').block('Please wait');

  93   * @desc prevent user interaction with all div elements with the 'special' class

  94   * and show a message over the blocked content.

  95   *

  96   * @name block

  97   * @type jQuery

  98   * @param String|jQuery|Element message Message to display while the element is blocked

  99   * @param Object css Style object to control look of the message

 100   * @cat Plugins/blockUI

 101   */
 102  $.fn.block = function(msg, css, opts) {
 103      return this.each(function() {
 104          if (!this.$pos_checked) {
 105              if ($.css(this,"position") == 'static')
 106                  this.style.position = 'relative';
 107              if ($.browser.msie) this.style.zoom = 1; // force 'hasLayout' in IE

 108              this.$pos_checked = 1;
 109          }
 110          $.blockUI.impl.install(this, msg, css, opts);
 111      });
 112  };
 113  
 114  /**

 115   * Unblocks content that was blocked by "block()"

 116   *

 117   * @example  $('div.special').unblock();

 118   * @desc unblocks all div elements with the 'special' class.

 119   *

 120   * @name unblock

 121   * @type jQuery

 122   * @cat Plugins/blockUI

 123   */
 124  $.fn.unblock = function(opts) {
 125      return this.each(function() {
 126          $.blockUI.impl.remove(this, opts);
 127      });
 128  };
 129  
 130  /**

 131   * displays the first matched element in a "display box" above a page overlay.

 132   *

 133   * @example  $('#myImage').displayBox();

 134   * @desc displays "myImage" element in a box

 135   *

 136   * @name displayBox

 137   * @type jQuery

 138   * @cat Plugins/blockUI

 139   */
 140  $.fn.displayBox = function(css, fn, isFlash) {
 141      var msg = this[0];
 142      if (!msg) return;
 143      var $msg = $(msg);
 144      css = css || {};
 145  
 146      var w = $msg.width()  || $msg.attr('width')  || css.width  || $.blockUI.defaults.displayBoxCSS.width;
 147      var h = $msg.height() || $msg.attr('height') || css.height || $.blockUI.defaults.displayBoxCSS.height ;
 148      if (w[w.length-1] == '%') {
 149          var ww = document.documentElement.clientWidth || document.body.clientWidth;
 150          w = parseInt(w) || 100;
 151          w = (w * ww) / 100;
 152      }
 153      if (h[h.length-1] == '%') {
 154          var hh = document.documentElement.clientHeight || document.body.clientHeight;
 155          h = parseInt(h) || 100;
 156          h = (h * hh) / 100;
 157      }
 158  
 159      var ml = '-' + parseInt(w)/2 + 'px';
 160      var mt = '-' + parseInt(h)/2 + 'px';
 161  
 162      // supress opacity on overlay if displaying flash content on mac/ff platform

 163      var ua = navigator.userAgent.toLowerCase();
 164      var opts = {
 165          displayMode: fn || 1,
 166          noalpha: isFlash && /mac/.test(ua) && /firefox/.test(ua)
 167      };
 168  
 169      $.blockUI.impl.install(window, msg, { width: w, height: h, marginTop: mt, marginLeft: ml }, opts);
 170  };
 171  
 172  
 173  // override these in your code to change the default messages and styles

 174  $.blockUI.defaults = {
 175      // the message displayed when blocking the entire page

 176      pageMessage:    '<h1>Please wait...</h1>',
 177      // the message displayed when blocking an element

 178      elementMessage: '', // none
 179      // styles for the overlay iframe

 180      overlayCSS:  { backgroundColor: '#fff', opacity: '0.5' },
 181      // styles for the message when blocking the entire page

 182      pageMessageCSS:    { width:'250px', margin:'-50px 0 0 -125px', top:'50%', left:'50%', textAlign:'center', color:'#000', backgroundColor:'#fff', border:'3px solid #aaa' },
 183      // styles for the message when blocking an element

 184      elementMessageCSS: { width:'250px', padding:'10px', textAlign:'center', backgroundColor:'#fff'},
 185      // styles for the displayBox

 186      displayBoxCSS: { width: '400px', height: '400px', top:'50%', left:'50%' },
 187      // allow body element to be stetched in ie6

 188      ie6Stretch: 1,
 189      // supress tab nav from leaving blocking content?

 190      allowTabToLeave: 0,
 191      // Title attribute for overlay when using displayBox

 192      closeMessage: 'Click to close',
 193      // use fadeOut effect when unblocking (can be overridden on unblock call)

 194      fadeOut:  1,
 195      // fadeOut transition time in millis

 196      fadeTime: 400
 197  };
 198  
 199  // the gory details

 200  $.blockUI.impl = {
 201      box: null,
 202      boxCallback: null,
 203      pageBlock: null,
 204      pageBlockEls: [],
 205      op8: window.opera && window.opera.version() < 9,
 206      ie6: $.browser.msie && /MSIE 6.0/.test(navigator.userAgent),
 207      install: function(el, msg, css, opts) {
 208          opts = opts || {};
 209          this.boxCallback = typeof opts.displayMode == 'function' ? opts.displayMode : null;
 210          this.box = opts.displayMode ? msg : null;
 211          var full = (el == window);
 212  
 213          // use logical settings for opacity support based on browser but allow overrides via opts arg

 214          var noalpha = this.op8 || $.browser.mozilla && /Linux/.test(navigator.platform);
 215          if (typeof opts.alphaOverride != 'undefined')
 216              noalpha = opts.alphaOverride == 0 ? 1 : 0;
 217  
 218          if (full && this.pageBlock) this.remove(window, {fadeOut:0});
 219          // check to see if we were only passed the css object (a literal)

 220          if (msg && typeof msg == 'object' && !msg.jquery && !msg.nodeType) {
 221              css = msg;
 222              msg = null;
 223          }
 224          msg = msg ? (msg.nodeType ? $(msg) : msg) : full ? $.blockUI.defaults.pageMessage : $.blockUI.defaults.elementMessage;
 225          if (opts.displayMode)
 226              var basecss = jQuery.extend({}, $.blockUI.defaults.displayBoxCSS);
 227          else
 228              var basecss = jQuery.extend({}, full ? $.blockUI.defaults.pageMessageCSS : $.blockUI.defaults.elementMessageCSS);
 229          css = jQuery.extend(basecss, css || {});
 230          var f = ($.browser.msie) ? $('<iframe class="blockUI" style="z-index:1000;border:none;margin:0;padding:0;position:absolute;width:100%;height:100%;top:0;left:0" src="javascript:false;"></iframe>')
 231                                   : $('<div class="blockUI" style="display:none"></div>');
 232          var w = $('<div class="blockUI" style="z-index:1001;cursor:wait;border:none;margin:0;padding:0;width:100%;height:100%;top:0;left:0"></div>');
 233          var m = full ? $('<div class="blockUI blockMsg" style="z-index:1002;cursor:wait;padding:0;position:fixed"></div>')
 234                       : $('<div class="blockUI" style="display:none;z-index:1002;cursor:wait;position:absolute"></div>');
 235          w.css('position', full ? 'fixed' : 'absolute');
 236          if (msg) m.css(css);
 237          if (!noalpha) w.css($.blockUI.defaults.overlayCSS);
 238          if (this.op8) w.css({ width:''+el.clientWidth,height:''+el.clientHeight }); // lame

 239          if ($.browser.msie) f.css('opacity','0.0');
 240  
 241          $([f[0],w[0],m[0]]).appendTo(full ? 'body' : el);
 242  
 243          // ie7 must use absolute positioning in quirks mode and to account for activex issues (when scrolling)

 244          var expr = $.browser.msie && (!$.boxModel || $('object,embed', full ? null : el).length > 0);
 245          if (this.ie6 || expr) {
 246              // stretch content area if it's short

 247              if (full && $.blockUI.defaults.ie6Stretch && $.boxModel)
 248                  $('html,body').css('height','100%');
 249  
 250              // fix ie6 problem when blocked element has a border width

 251              if ((this.ie6 || !$.boxModel) && !full) {
 252                  var t = this.sz(el,'borderTopWidth'), l = this.sz(el,'borderLeftWidth');
 253                  var fixT = t ? '(0 - '+t+')' : 0;
 254                  var fixL = l ? '(0 - '+l+')' : 0;
 255              }
 256  
 257              // simulate fixed position

 258              $.each([f,w,m], function(i,o) {
 259                  var s = o[0].style;
 260                  s.position = 'absolute';
 261                  if (i < 2) {
 262                      full ? s.setExpression('height','document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + "px"')
 263                           : s.setExpression('height','this.parentNode.offsetHeight + "px"');
 264                      full ? s.setExpression('width','jQuery.boxModel && document.documentElement.clientWidth || document.body.clientWidth + "px"')
 265                           : s.setExpression('width','this.parentNode.offsetWidth + "px"');
 266                      if (fixL) s.setExpression('left', fixL);
 267                      if (fixT) s.setExpression('top', fixT);
 268                  }
 269                  else {
 270                      if (full) s.setExpression('top','(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"');
 271                      s.marginTop = 0;
 272                  }
 273              });
 274          }
 275          if (opts.displayMode) {
 276              w.css('cursor','default').attr('title', $.blockUI.defaults.closeMessage);
 277              m.css('cursor','default');
 278              $([f[0],w[0],m[0]]).removeClass('blockUI').addClass('displayBox');
 279              $().click($.blockUI.impl.boxHandler).bind('keypress', $.blockUI.impl.boxHandler);
 280          }
 281          else
 282              this.bind(1, el);
 283          m.append(msg).show();
 284          if (msg.jquery) msg.show();
 285          if (opts.displayMode) return;
 286          if (full) {
 287              this.pageBlock = m[0];
 288              this.pageBlockEls = $(':input:enabled:visible',this.pageBlock);
 289              setTimeout(this.focus, 20);
 290          }
 291          else this.center(m[0]);
 292      },
 293      remove: function(el, opts) {
 294          var o = $.extend({}, $.blockUI.defaults, opts);
 295          this.bind(0, el);
 296          var full = el == window;
 297          var els = full ? $('body').children().filter('.blockUI') : $('.blockUI', el);
 298          if (full) this.pageBlock = this.pageBlockEls = null;
 299  
 300          if (o.fadeOut) {
 301              els.fadeOut(o.fadeTime, function() {
 302                  if (this.parentNode) this.parentNode.removeChild(this);
 303              });
 304          }
 305          else els.remove();
 306      },
 307      boxRemove: function(el) {
 308          $().unbind('click',$.blockUI.impl.boxHandler).unbind('keypress', $.blockUI.impl.boxHandler);
 309          if (this.boxCallback)
 310              this.boxCallback(this.box);
 311          $('body .displayBox').hide().remove();
 312      },
 313      // event handler to suppress keyboard/mouse events when blocking

 314      handler: function(e) {
 315          if (e.keyCode && e.keyCode == 9) {
 316              if ($.blockUI.impl.pageBlock && !$.blockUI.defaults.allowTabToLeave) {
 317                  var els = $.blockUI.impl.pageBlockEls;
 318                  var fwd = !e.shiftKey && e.target == els[els.length-1];
 319                  var back = e.shiftKey && e.target == els[0];
 320                  if (fwd || back) {
 321                      setTimeout(function(){$.blockUI.impl.focus(back)},10);
 322                      return false;
 323                  }
 324              }
 325          }
 326          if ($(e.target).parents('div.blockMsg').length > 0)
 327              return true;
 328          return $(e.target).parents().children().filter('div.blockUI').length == 0;
 329      },
 330      boxHandler: function(e) {
 331          if ((e.keyCode && e.keyCode == 27) || (e.type == 'click' && $(e.target).parents('div.blockMsg').length == 0))
 332              $.blockUI.impl.boxRemove();
 333          return true;
 334      },
 335      // bind/unbind the handler

 336      bind: function(b, el) {
 337          var full = el == window;
 338          // don't bother unbinding if there is nothing to unbind

 339          if (!b && (full && !this.pageBlock || !full && !el.$blocked)) return;
 340          if (!full) el.$blocked = b;
 341          var $e = $(el).find('a,:input');
 342          $.each(['mousedown','mouseup','keydown','keypress','click'], function(i,o) {
 343              $e[b?'bind':'unbind'](o, $.blockUI.impl.handler);
 344          });
 345      },
 346      focus: function(back) {
 347          if (!$.blockUI.impl.pageBlockEls) return;
 348          var e = $.blockUI.impl.pageBlockEls[back===true ? $.blockUI.impl.pageBlockEls.length-1 : 0];
 349          if (e) e.focus();
 350      },
 351      center: function(el) {
 352          var p = el.parentNode, s = el.style;
 353          var l = ((p.offsetWidth - el.offsetWidth)/2) - this.sz(p,'borderLeftWidth');
 354          var t = ((p.offsetHeight - el.offsetHeight)/2) - this.sz(p,'borderTopWidth');
 355          s.left = l > 0 ? (l+'px') : '0';
 356          s.top  = t > 0 ? (t+'px') : '0';
 357      },
 358      sz: function(el, p) { return parseInt($.css(el,p))||0; }
 359  };
 360  
 361  })(jQuery);