Try to use blockUI

This commit is contained in:
Regis Houssin 2012-09-04 09:38:38 +02:00
parent 2130571712
commit 7f6bf34362
4 changed files with 79 additions and 101 deletions

View File

@ -22,100 +22,69 @@
// Examples // Examples
$(document).ready(function() { $(document).ready(function() {
// override these in your code to change the default behavior and style // override these in your code to change the default behavior and style
$.blockUI.defaults = { $.blockUI.defaults = {
// message displayed when blocking (use null for no message)
message: '<h1>Please wait...</h1>', // styles applied when using $.growlUI
dolEventValidCSS: {
// styles for the message when blocking; if you wish to disable width: '350px',
// these and use an external stylesheet then do this in your code: top: '10px',
// $.blockUI.defaults.css = {}; left: '',
css: { right: '10px',
padding: 0, border: 'none',
margin: 0, padding: '5px',
width: '30%', opacity: 0.8,
top: '40%', cursor: 'default',
left: '35%', color: '#fff',
textAlign: 'center', backgroundColor: '#e3f0db',
color: '#000', '-webkit-border-radius': '10px',
border: '3px solid #aaa', '-moz-border-radius': '10px',
backgroundColor:'#fff', 'border-radius': '10px'
cursor: 'wait' },
},
// styles applied when using $.growlUI
// styles for the overlay dolEventErrorCSS: {
overlayCSS: { width: '350px',
backgroundColor: '#000', top: '10px',
opacity: 0.6 left: '',
}, right: '10px',
border: 'none',
// styles applied when using $.growlUI padding: '5px',
growlCSS: { opacity: 0.8,
width: '350px', cursor: 'default',
top: '10px', color: '#a72947',
left: '', backgroundColor: '#d79eac',
right: '10px', '-webkit-border-radius': '10px',
border: 'none', '-moz-border-radius': '10px',
padding: '5px', 'border-radius': '10px'
opacity: 0.6, }
cursor: null,
color: '#fff', };
backgroundColor: '#000',
'-webkit-border-radius': '10px', $.dolEventValid = function(title, message, timeout, onClose) {
'-moz-border-radius': '10px' var $m = $('<div class="dolEventValid"></div>');
}, if (title) $m.append('<h1>'+title+'</h1>');
if (message) $m.append('<h2>'+message+'</h2>');
// IE issues: 'about:blank' fails on HTTPS and javascript:false is s-l-o-w if (timeout == undefined) timeout = 3000;
// (hat tip to Jorge H. N. de Vasconcelos) $.blockUI({
iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank', message: $m, fadeIn: 200, fadeOut: 700, centerY: false,
timeout: timeout, showOverlay: false,
// force usage of iframe in non-IE browsers (handy for blocking applets) onUnblock: onClose,
forceIframe: false, css: $.blockUI.defaults.dolEventValidCSS
});
// z-index for the blocking overlay };
baseZ: 1000,
$.dolEventError = function(title, message, timeout, onClose) {
// set these to true to have the message automatically centered var $m = $('<div class="dolEventError"></div>');
centerX: true, // <-- only effects element blocking (page block controlled via css above) if (title) $m.append('<h1>'+title+'</h1>');
centerY: true, if (message) $m.append('<h2>'+message+'</h2>');
if (timeout == undefined) timeout = 0;
// allow body element to be stetched in ie6; this makes blocking look better $.blockUI({
// on "short" pages. disable if you wish to prevent changes to the body height message: $m, fadeIn: 200, centerY: false,
allowBodyStretch: true, timeout: timeout, showOverlay: false,
onUnblock: onClose,
// enable if you want key and mouse events to be disabled for content that is blocked css: $.blockUI.defaults.dolEventErrorCSS
bindEvents: true, });
$('.dolEventError').click($.unblockUI);
// be default blockUI will supress tab navigation from leaving blocking content };
// (if bindEvents is true)
constrainTabKey: true,
// fadeIn time in millis; set to 0 to disable fadeIn on block
fadeIn: 200,
// fadeOut time in millis; set to 0 to disable fadeOut on unblock
fadeOut: 400,
// time in millis to wait before auto-unblocking; set to 0 to disable auto-unblock
timeout: 0,
// disable if you don't want to show the overlay
showOverlay: true,
// if true, focus will be placed in the first available input field when
// page blocking
focusInput: true,
// suppresses the use of overlay styles on FF/Linux (due to performance issues with opacity)
applyPlatformOpacityRules: true,
// callback method invoked when unblocking has completed; the callback is
// passed the element that has been unblocked (which is the window object for page
// blocks) and the options that were passed to the unblock call:
// onUnblock(element, options)
onUnblock: null,
// don't ask; if you really must know: http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493
quirksmodeOffsetHack: 4
};
}); });

View File

@ -3595,7 +3595,7 @@ function get_htmloutput_mesg($mesgstring='',$mesgarray='', $style='ok', $keepemb
$(document).ready(function() { $(document).ready(function() {
var block = '.(! empty($conf->global->MAIN_USE_JQUERY_BLOCKUI)?"true":"false").' var block = '.(! empty($conf->global->MAIN_USE_JQUERY_BLOCKUI)?"true":"false").'
if (block) { if (block) {
$.growlUI("'.dol_escape_js($out).'"); $.dolEventValid("","'.dol_escape_js($out).'");
} else { } else {
$.jnotify("'.dol_escape_js($out).'", $.jnotify("'.dol_escape_js($out).'",
"'.($style=="ok" ? 3000 : $style).'", "'.($style=="ok" ? 3000 : $style).'",

View File

@ -967,7 +967,7 @@ function top_htmlhead($head, $title='', $disablejs=0, $disablehead=0, $arrayofjs
if (! empty($conf->global->MAIN_USE_JQUERY_BLOCKUI)) if (! empty($conf->global->MAIN_USE_JQUERY_BLOCKUI))
{ {
print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/blockUI/jquery.blockUI.js"></script>'."\n"; print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/blockUI/jquery.blockUI.js"></script>'."\n";
//print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/core/js/blockUI.js"></script>'."\n"; print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/core/js/blockUI.js"></script>'."\n";
} }
// Flot // Flot
if (empty($conf->global->MAIN_DISABLE_JQUERY_FLOT)) if (empty($conf->global->MAIN_DISABLE_JQUERY_FLOT))

View File

@ -2514,9 +2514,18 @@ div.jnotify-background {
/* blockUI */ /* blockUI */
/* ============================================================================== */ /* ============================================================================== */
div.growlUI { background: url(check48.png) no-repeat 10px 10px } /*div.growlUI { background: url(check48.png) no-repeat 10px 10px }*/
div.growlUI h1, div.growlUI h2 { div.dolEventValid h1, div.dolEventValid h2 {
color: white; padding: 5px 5px 5px 75px; text-align: left color: #567b1b;
background-color: #e3f0db;
padding: 5px 5px 5px 5px;
text-align: left;
}
div.dolEventError h1, div.dolEventError h2 {
color: #a72947;
background-color: #d79eac;
padding: 5px 5px 5px 5px;
text-align: left;
} }
/* ============================================================================== */ /* ============================================================================== */