Title: Loading Message for Dialog/Panel
Post by: arma on August 04, 2014, 01:14:16 AM
Hi,
I have a dialog cotaining form and save button. When i press save button i want to show waiting message and make all the dialog covered by div so it could not be clicked or changed. Similiar when waiting grid to finish loading on refresh.
Any idea how?
Thanks.
Title: Re: Loading Message for Dialog/Panel
Post by: stworthy on August 04, 2014, 01:46:17 AM
Please try to use the $.messager.progress $.messager.progress({
title:'Please waiting',
msg:'Loading data...'
});
Call 'close' method to destroy the progress message window. $.messager.progress('close');
Title: Re: Loading Message for Dialog/Panel
Post by: arma on August 04, 2014, 02:26:28 AM
Yes, i was considering using $.messager but it's too huge and covering all screen, i want something like data grid loading messager, small, simple and only cover its container.
Thanks anyway.
Title: Re: Loading Message for Dialog/Panel
Post by: stworthy on August 04, 2014, 10:52:55 PM
Here is the extended methods, 'showMask' and 'hideMask', which can be used to display a loading message or hide it. $.extend($.fn.panel.methods, {
showMask: function(jq, msg){
return jq.each(function(){
var pal = $(this).panel('panel');
if (pal.css('position').toLowerCase() != 'absolute'){
pal.css('position','relative');
}
var borderSize = parseInt(pal.css('padding'))+1;
var m = pal.children('div.panel-mask');
if (!m.length){
m = $('<div class="panel-mask"></div>').appendTo(pal);
}
m.css({
background:'#fff',
left:borderSize,
top:(borderSize+pal.children('.panel-header')._outerHeight()),
right:borderSize,
bottom:borderSize
});
m.children('div.panel-mask-msg').remove();
var mm = $('<div class="panel-mask-msg"></div>').appendTo(m);
mm.html(msg).css({position:'absolute'}).css({
position:'absolute',
top: '50%',
left: '50%',
marginTop: -mm._outerHeight()/2,
marginLeft: -mm._outerWidth()/2
})
});
},
hideMask: function(jq){
return jq.each(function(){
$(this).panel('panel').children('div.panel-mask').remove();
})
}
});
Usage example: $('#dlg').dialog('showMask', 'Loading...'); // display the loading message
$('#dlg').dialog('hideMask'); // hide the loading message
Title: Re: Loading Message for Dialog/Panel
Post by: arma on August 05, 2014, 06:09:17 AM
Thanks stworthy,i guess you should put this in the core of next version 1.5 :)
Title: Re: Loading Message for Dialog/Panel
Post by: Aod47 on January 29, 2020, 05:54:56 PM
I tried code above not show mask. Code from topic show mask correctly. https://www.jeasyui.com/forum/index.php?topic=4692.0 (https://www.jeasyui.com/forum/index.php?topic=4692.0) Thank you. $.extend($.fn.panel.methods, {
showMask: function(jq, msg){
return jq.each(function(){
var pal = $(this).panel('panel');
if (pal.css('position').toLowerCase() != 'absolute'){
pal.css('position','relative');
}
var borderSize = parseInt(pal.css('padding')||0)+1;
var m = pal.children('div.panel-mask');
if (!m.length){
m = $('<div class="panel-mask"></div>').appendTo(pal);
}
m.css({
position:'absolute',
background:'red',
opacity:0.6,
filter:'alpha(opacity=60)',
left:borderSize,
top:(borderSize+pal.children('.panel-header')._outerHeight()),
right:borderSize,
bottom:borderSize
});
m.children('div.panel-mask-msg').remove();
var mm = $('<div class="panel-mask-msg"></div>').appendTo(m);
mm.html(msg).css({position:'absolute'}).css({
position:'absolute',
top: '50%',
left: '50%',
marginTop: -mm._outerHeight()/2,
marginLeft: -mm._outerWidth()/2
})
});
},
hideMask: function(jq){
return jq.each(function(){
$(this).panel('panel').children('div.panel-mask').remove();
})
}
});
|