擴展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")

效果圖：