扩展easyUI tab控件，添加加载遮罩效果 （转）

项目里要用HighChart显示图表，若是返回的数量量太多，生成图表是一个很耗时的过程。tab控件又没有显示遮罩的设置（至少本菜是没有找到），

Google了一下，根据另外一个兄台写的方法，拿来改造了一下，效果不错。拿来分享

原文地址：jQuery扩展easyui.datagrid，添加数据loading遮罩效果代码

修改后的代码：

 1     (function () {  
 2         $.extend($.fn.tabs.methods, {  
 3             //显示遮罩  
 4             loading: function (jq, msg) {  
 5                 return jq.each(function () {  
 6                     var panel = $(this).tabs("getSelected");  
 7                     if (msg == undefined) {  
 8                         msg = "正在加载数据，请稍候...";  
 9                     }  
10                     $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: panel.width(), height: panel.height() }).appendTo(panel);  
11                     $("<div class=\"datagrid-mask-msg\"></div>").html(msg).appendTo(panel).css({ display: "block", left: (panel.width() - $("div.datagrid-mask-msg", panel).outerWidth()) / 2, top: (panel.height() - $("div.datagrid-mask-msg", panel).outerHeight()) / 2 });  
12                 });  
13             }  
14     ,  
15             //隐藏遮罩  
16             loaded: function (jq) {  
17                 return jq.each(function () {  
18                     var panel = $(this).tabs("getSelected");  
19                     panel.find("div.datagrid-mask-msg").remove();  
20                     panel.find("div.datagrid-mask").remove();  
21                 });  
22             }  
23         });  
24     })(jQuery);  

另外对(function(){})(Jquery)的解释：

(function($){...})(jQuery)其实是匿名函数，function(arg){...}
这就定义了一个匿名函数，参数为arg

而调用函数时，是在函数后面写上括号和实参的，因为操做符的优先级，函数自己也须要用括号，即：
(function(arg){...})(param)
这就至关于定义了一个参数为arg的匿名函数，而且将param做为参数来调用这个匿名函数

而(function($){...})(jQuery)则是同样的，之因此只在形参使用$，是为了避免与其余库冲突，因此实参用jQuery
var fn = function($){....};
fn(jQuery);

使用方法：

显示遮罩：$("#tabID").tabs("loading",msg) msg--要显示的信息

隐藏遮罩：$("#tabID").tabs("loaded")

效果图：