| 1 |
/*
|
| 2 |
* jQuery blockUI plugin
|
| 3 |
* Version 1.06 (03/30/2007)
|
| 4 |
* @requires jQuery v1.1.1
|
| 5 |
*
|
| 6 |
* Examples at: http://malsup.com/jquery/block/
|
| 7 |
* Copyright (c) 2007 M. Alsup
|
| 8 |
* Dual licensed under the MIT and GPL licenses:
|
| 9 |
* http://www.opensource.org/licenses/mit-license.php
|
| 10 |
* http://www.gnu.org/licenses/gpl.html
|
| 11 |
*/
|
| 12 |
(function($) {
|
| 13 |
/**
|
| 14 |
* blockUI provides a mechanism for blocking user interaction with a page (or parts of a page).
|
| 15 |
* This can be an effective way to simulate synchronous behavior during ajax operations without
|
| 16 |
* locking the browser. It will prevent user operations for the current page while it is
|
| 17 |
* active ane will return the page to normal when it is deactivate. blockUI accepts the following
|
| 18 |
* two optional arguments:
|
| 19 |
*
|
| 20 |
* message (String|Element|jQuery): The message to be displayed while the UI is blocked. The message
|
| 21 |
* argument can be a plain text string like "Processing...", an HTML string like
|
| 22 |
* "<h1><img src="busy.gif" /> Please wait...</h1>", a DOM element, or a jQuery object.
|
| 23 |
* The default message is "<h1>Please wait...</h1>"
|
| 24 |
*
|
| 25 |
* css (Object): Object which contains css property/values to override the default styles of
|
| 26 |
* the message. Use this argument if you wish to override the default
|
| 27 |
* styles. The css Object should be in a format suitable for the jQuery.css
|
| 28 |
* function. For example:
|
| 29 |
* $.blockUI({
|
| 30 |
* backgroundColor: '#ff8',
|
| 31 |
* border: '5px solid #f00,
|
| 32 |
* fontWeight: 'bold'
|
| 33 |
* });
|
| 34 |
*
|
| 35 |
* The default blocking message used when blocking the entire page is "<h1>Please wait...</h1>"
|
| 36 |
* but this can be overridden by assigning a value to $.blockUI.defaults.pageMessage in your
|
| 37 |
* own code. For example:
|
| 38 |
*
|
| 39 |
* $.blockUI.defaults.pageMessage = "<h1>Bitte Wartezeit</h1>";
|
| 40 |
*
|
| 41 |
* The default message styling can also be overridden. For example:
|
| 42 |
*
|
| 43 |
* $.extend($.blockUI.defaults.pageMessageCSS, { color: '#00a', backgroundColor: '#0f0' });
|
| 44 |
*
|
| 45 |
* The default styles work well for simple messages like "Please wait", but for longer messages
|
| 46 |
* style overrides may be necessary.
|
| 47 |
*
|
| 48 |
* @example $.blockUI();
|
| 49 |
* @desc prevent user interaction with the page (and show the default message of 'Please wait...')
|
| 50 |
*
|
| 51 |
* @example $.blockUI( { backgroundColor: '#f00', color: '#fff'} );
|
| 52 |
* @desc prevent user interaction and override the default styles of the message to use a white on red color scheme
|
| 53 |
*
|
| 54 |
* @example $.blockUI('Processing...');
|
| 55 |
* @desc prevent user interaction and display the message "Processing..." instead of the default message
|
| 56 |
*
|
| 57 |
* @name blockUI
|
| 58 |
* @param String|jQuery|Element message Message to display while the UI is blocked
|
| 59 |
* @param Object css Style object to control look of the message
|
| 60 |
* @cat Plugins/blockUI
|
| 61 |
*/
|
| 62 |
$.blockUI = function(msg, css) {
|
| 63 |
$.blockUI.impl.install(window, msg, css);
|
| 64 |
};
|
| 65 |
|
| 66 |
/**
|
| 67 |
* unblockUI removes the UI block that was put in place by blockUI
|
| 68 |
*
|
| 69 |
* @example $.unblockUI();
|
| 70 |
* @desc unblocks the page
|
| 71 |
*
|
| 72 |
* @name unblockUI
|
| 73 |
* @cat Plugins/blockUI
|
| 74 |
*/
|
| 75 |
$.unblockUI = function() {
|
| 76 |
$.blockUI.impl.remove(window);
|
| 77 |
};
|
| 78 |
|
| 79 |
/**
|
| 80 |
* Blocks user interaction with the selected elements. (Hat tip: Much of
|
| 81 |
* this logic comes from Brandon Aaron's bgiframe plugin. Thanks, Brandon!)
|
| 82 |
* By default, no message is displayed when blocking elements.
|
| 83 |
*
|
| 84 |
* @example $('div.special').block();
|
| 85 |
* @desc prevent user interaction with all div elements with the 'special' class.
|
| 86 |
*
|
| 87 |
* @example $('div.special').block('Please wait');
|
| 88 |
* @desc prevent user interaction with all div elements with the 'special' class
|
| 89 |
* and show a message over the blocked content.
|
| 90 |
*
|
| 91 |
* @name block
|
| 92 |
* @type jQuery
|
| 93 |
* @param String|jQuery|Element message Message to display while the element is blocked
|
| 94 |
* @param Object css Style object to control look of the message
|
| 95 |
* @cat Plugins/blockUI
|
| 96 |
*/
|
| 97 |
$.fn.block = function(msg, css) {
|
| 98 |
return this.each(function() {
|
| 99 |
if (!this.$pos_checked) {
|
| 100 |
if ($.css(this,"position") == 'static')
|
| 101 |
this.style.position = 'relative';
|
| 102 |
this.$pos_checked = 1;
|
| 103 |
}
|
| 104 |
$.blockUI.impl.install(this, msg, css);
|
| 105 |
});
|
| 106 |
};
|
| 107 |
|
| 108 |
/**
|
| 109 |
* Unblocks content that was blocked by "block()"
|
| 110 |
*
|
| 111 |
* @example $('div.special').unblock();
|
| 112 |
* @desc unblocks all div elements with the 'special' class.
|
| 113 |
*
|
| 114 |
* @name unblock
|
| 115 |
* @type jQuery
|
| 116 |
* @cat Plugins/blockUI
|
| 117 |
*/
|
| 118 |
$.fn.unblock = function() {
|
| 119 |
return this.each(function() {
|
| 120 |
$.blockUI.impl.remove(this);
|
| 121 |
});
|
| 122 |
};
|
| 123 |
|
| 124 |
// override these in your code to change the default messages and styles
|
| 125 |
$.blockUI.defaults = {
|
| 126 |
// the message displayed when blocking the entire page
|
| 127 |
pageMessage: '<h1>Please wait...</h1>',
|
| 128 |
// the message displayed when blocking an element
|
| 129 |
elementMessage: '', // none
|
| 130 |
// styles for the overlay iframe
|
| 131 |
overlayCSS: { backgroundColor: '#fff', opacity: '0.5' },
|
| 132 |
// styles for the message when blocking the entire page
|
| 133 |
pageMessageCSS: { width:'250px', margin:'-50px 0 0 -125px', top:'50%', left:'50%', textAlign:'center', color:'#000', backgroundColor:'#fff', border:'3px solid #aaa' },
|
| 134 |
// styles for the message when blocking an element
|
| 135 |
elementMessageCSS: { width:'250px', padding:'10px', textAlign:'center', backgroundColor:'#fff'},
|
| 136 |
// allow body element to be stetched in ie6
|
| 137 |
ie6Stretch: 1
|
| 138 |
};
|
| 139 |
|
| 140 |
// the gory details
|
| 141 |
$.blockUI.impl = {
|
| 142 |
pageBlock: null,
|
| 143 |
op8: window.opera && window.opera.version() < 9,
|
| 144 |
ffLinux: $.browser.mozilla && /Linux/.test(navigator.platform),
|
| 145 |
ie6: $.browser.msie && typeof XMLHttpRequest == 'function',
|
| 146 |
install: function(el, msg, css) {
|
| 147 |
var full = (el == window), noalpha = this.op8 || this.ffLinux;
|
| 148 |
if (full && this.pageBlock) this.remove(window);
|
| 149 |
// check to see if we were only passed the css object (a literal)
|
| 150 |
if (msg && typeof msg == 'object' && !msg.jquery && !msg.nodeType) {
|
| 151 |
css = msg;
|
| 152 |
msg = null;
|
| 153 |
}
|
| 154 |
msg = msg ? (msg.nodeType ? $(msg) : msg) : full ? $.blockUI.defaults.pageMessage : $.blockUI.defaults.elementMessage;
|
| 155 |
var basecss = jQuery.extend({}, full ? $.blockUI.defaults.pageMessageCSS : $.blockUI.defaults.elementMessageCSS);
|
| 156 |
css = jQuery.extend(basecss, css || {});
|
| 157 |
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;document.write(\'\');"></iframe>')
|
| 158 |
: $('<div class="blockUI" style="display:none"></div>');
|
| 159 |
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>');
|
| 160 |
var m = full ? $('<div class="blockUI blockMsg" style="z-index:1002;cursor:wait;padding:0;position:fixed"></div>')
|
| 161 |
: $('<div class="blockUI" style="display:none;z-index:1002;cursor:wait;position:absolute"></div>');
|
| 162 |
w.css('position', full ? 'fixed' : 'absolute');
|
| 163 |
if (msg) m.css(css);
|
| 164 |
if (!noalpha) w.css($.blockUI.defaults.overlayCSS);
|
| 165 |
if (this.op8) w.css({ width:''+el.clientWidth,height:''+el.clientHeight }); // lame
|
| 166 |
if ($.browser.msie) f.css('opacity','0.0');
|
| 167 |
|
| 168 |
$([f[0],w[0],m[0]]).appendTo(full ? 'body' : el);
|
| 169 |
if (full) this.pageBlock = m[0];
|
| 170 |
|
| 171 |
// ie7 needs to use absolute positioning to account for activex issues (when scrolling)
|
| 172 |
var activex = $.browser.msie && $('object,embed', full ? null : el).length > 0
|
| 173 |
if (this.ie6 || activex) {
|
| 174 |
// stretch content area if it's short
|
| 175 |
if (full && $.blockUI.defaults.ie6Stretch && $.boxModel)
|
| 176 |
$('html,body').css('height','100%');
|
| 177 |
|
| 178 |
// simulate fixed position
|
| 179 |
$.each([f,w,m], function(i) {
|
| 180 |
var s = this[0].style;
|
| 181 |
s.position = 'absolute';
|
| 182 |
if (i < 2) {
|
| 183 |
full ? s.setExpression('height','document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + "px"') : s.setExpression('height','this.parentNode.offsetHeight + "px"');
|
| 184 |
// full ? s.setExpression('height','document.body.scrollHeight + "px"') : s.setExpression('height','this.parentNode.offsetHeight + "px"');
|
| 185 |
full ? s.setExpression('width','jQuery.boxModel && document.documentElement.clientWidth || document.body.clientWidth + "px"')
|
| 186 |
: s.setExpression('width','this.parentNode.offsetWidth + "px"');
|
| 187 |
}
|
| 188 |
else {
|
| 189 |
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"')
|
| 190 |
: s.setExpression('top','this.parentNode.top');
|
| 191 |
s.marginTop = 0;
|
| 192 |
}
|
| 193 |
});
|
| 194 |
}
|
| 195 |
this.bind(1, el);
|
| 196 |
m.append(msg).show();
|
| 197 |
if (msg.jquery) msg.show();
|
| 198 |
full ? setTimeout(this.focus, 200): this.center(m[0]);
|
| 199 |
},
|
| 200 |
remove: function(el) {
|
| 201 |
this.bind(0, el);
|
| 202 |
var full = el == window;
|
| 203 |
if (full) {
|
| 204 |
$('body').children().filter('.blockUI').remove();
|
| 205 |
this.pageBlock = null;
|
| 206 |
}
|
| 207 |
else $('.blockUI', el).remove();
|
| 208 |
},
|
| 209 |
// event handler to suppress keyboard/mouse events when blocking
|
| 210 |
handler: function(e) {
|
| 211 |
if (e.keyCode && e.keyCode == 9) return true;
|
| 212 |
if ($(e.target).parents('div.blockMsg').length > 0)
|
| 213 |
return true;
|
| 214 |
return $(e.target).parents().children().filter('div.blockUI').length == 0;
|
| 215 |
},
|
| 216 |
// bind/unbind the handler
|
| 217 |
bind: function(b, el) {
|
| 218 |
var full = el == window;
|
| 219 |
// don't bother unbinding if there is nothing to unbind
|
| 220 |
if (!b && (full && !this.pageBlock || !full && !el.$blocked)) return;
|
| 221 |
if (!full) el.$blocked = b;
|
| 222 |
var $e = full ? $() : $(el).find('a,:input');
|
| 223 |
$.each(['mousedown','mouseup','keydown','keypress','keyup','click'], function(i,o) {
|
| 224 |
$e[b?'bind':'unbind'](o, $.blockUI.impl.handler);
|
| 225 |
});
|
| 226 |
},
|
| 227 |
focus: function() {
|
| 228 |
if (!$.blockUI.impl.pageBlock) return;
|
| 229 |
var v = $(':input:visible:enabled', $.blockUI.impl.pageBlock)[0];
|
| 230 |
if (v) v.focus();
|
| 231 |
},
|
| 232 |
center: function(el) {
|
| 233 |
var p = el.parentNode, s = el.style;
|
| 234 |
var l = (this.sz(p,1) - this.sz(el,1))/2, t = (this.sz(p,0) - this.sz(el,0))/2;
|
| 235 |
s.left = l > 0 ? (l+'px') : '0';
|
| 236 |
s.top = t > 0 ? (t+'px') : '0';
|
| 237 |
},
|
| 238 |
sz: function(el, w) { return parseInt($.css(el,(w?"width":"height"))); }
|
| 239 |
};
|
| 240 |
|
| 241 |
})(jQuery);
|
Parent Directory
| 
Revision Log
| 
Revision Graph