Print Page - Load message for tree.

Please try to extend a new method to display a mask message on a panel.

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({
				position:'absolute',
				background:'#fff',
				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();
		})
	}
});

And then put the tree to a panel.

Code:

<div id="pp" class="easyui-panel">
  <ul class="easyui-tree" ...>
</div>

When loading the tree data, call 'showMask' method to display a waiting message.

Code:

$('#pp').panel('showMask', 'Loading, please waiting...');

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: iceh on August 15, 2014, 05:34:44 AM