Loading Message for Dialog/Panel

[arma]

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.

[stworthy]

Please try to use the $.messager.progress

Code:

$.messager.progress({
    title:'Please waiting',
    msg:'Loading data...'
});

Call 'close' method to destroy the progress message window.

Code:

$.messager.progress('close');

[arma]

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.

[stworthy]

Here is the extended methods, 'showMask' and 'hideMask', which can be used to display a loading message or hide it.

Code:

$.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:

Code:

$('#dlg').dialog('showMask', 'Loading...');  // display the loading message
$('#dlg').dialog('hideMask');  // hide the loading message

[arma]

Thanks stworthy,i guess you should put this in the core of next version 1.5

[Aod47]

I tried code above not show mask.

Code from topic show mask correctly.

https://www.jeasyui.com/forum/index.php?topic=4692.0

Thank you.

Code:

$.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();
				})
			}
		});