【轉】擴展easyUI tab控件，添加加載遮罩效果

在easyui下本身生成遮罩效果的方法
 

(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")

效果圖：