easyui爲tab添加遮罩層

項目裏要用HighChart顯示圖表，若是返回的數量量太多，生成圖表是一個很耗時的過程。tab控件又沒有顯示遮罩的設置（至少本菜是沒有找到），

Google了一下，根據另外一個兄臺寫的方法，拿來改造了一下，效果不錯。拿來分享

原文地址：jQuery擴展easyui.datagrid，添加數據loading遮罩效果代碼

http://www.thinksaas.cn/group/topic/349102/

修改後的代碼：

(function () {  
    $.extend($.fn.tabs.methods, {  
        //顯示遮罩   
        loading: function (jq, msg) {  
            return jq.each(function () {  
                var panel = $(this).tabs("getSelected");  
                if (msg == undefined) {  
                    msg = "正在加載數據，請稍候...";  
                }  
                $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: panel.width(), height: panel.height() }).appendTo(panel);  
                $("<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 });  
            });  
        }  
,  
        //隱藏遮罩   
        loaded: function (jq) {  
            return jq.each(function () {  
                var panel = $(this).tabs("getSelected");  
                panel.find("div.datagrid-mask-msg").remove();  
                panel.find("div.datagrid-mask").remove();  
            });  
        }  
    });  
})(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")