基于jeasyui的遮罩扩展[修复链式bug]

说明和使用方法看下面代码，直接复制下面代码保存为js文件，引用即可。

遮罩效果从datagrid中提取，针对jquery进行优化。

下载地址（附Demo）：http://pan.baidu.com/share/link?shareid=2241984917&uk=1325762948

 

/**
 * easyUI - mask
 * easyUI - 遮罩
 * @author isea533
 * @author http://blog.csdn.net/isea533
 * 
 *
 * Requires:
 * 依赖:
 * 		jquery.js
 * 		jquery.easyui.js
 * 
 * How to use:
 * 使用方法:
 * 		$('.class').easyMask('show'[,options]);
 *		$('.class').easyMask('hide'[,options]);
 *
 *		$.easyMask('.class','show'[,options]);
 *		$.easyMask('.class','hide'[,options]);
 * 		
 *		options = {msg:''}
 *		default options = $.easyMask.options;
 */
(function($){
	//$对象
	$.fn.easyMask = function(method,options){
		return $.easyMask(this,method,options);
	}
	//全局函数
	$.easyMask = function(target,method,options){
		var tar = target||'body';
		var $targ = $(tar);
		var opt = $.extend({},$.easyMask.options,options);
		var method = $.easyMask.methods[method];
		if(method){
			return method(tar,opt);
		}
		return $targ;
	};
	
	$.easyMask.methods = {
		show:function(target,options){
			return $(target).each(function(){
				var $targ = $(this);
				//如果当前对象不是relative,那就添加该属性
				//$("#hehe").css("position")
				if($targ.css('position')!='relative'){
					$targ.data('position',$targ.css('position'));
					$targ.css('position','relative');
				}
				$('<div class=\'datagrid-mask\' style=\"display:block\"></div>').appendTo($targ);
				var msg = $('<div class=\'datagrid-mask-msg\' style=\"display:block;left:50%\"></div>')
							.html(options.msg).appendTo($targ);
				msg.css("marginLeft", -msg.outerWidth() / 2);
			});
		},
		hide:function(target,options){
			return $(target).each(function(){
				$here = $(this);
				$here.children('.datagrid-mask').remove();  
				$here.children('.datagrid-mask-msg').remove();
				//还原position属性
				if($here.data().position!=undefined){
					$here.css("position",$here.data().position);
					$here.removeData('position');
				}
			});
		}
	}
	
	$.easyMask.options = {
		msg:'Loading...'
	};
})(jQuery)

 

 

 

 

Demo效果：