easyui爲tab添加遮罩層

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

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

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

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

修改後的代碼:
ui

(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)的解釋:this

(function($){...})(jQuery)其實是匿名函數,function(arg){...} 
這就定義了一個匿名函數,參數爲arg 

而調用函數時,是在函數後面寫上括號和實參的,因爲操做符的優先級,函數自己也須要用括號,即: 
(function(arg){...})(param) 
這就至關於定義了一個參數爲arg的匿名函數,而且將param做爲參數來調用這個匿名函數 

而(function($){...})(jQuery)則是同樣的,之因此只在形參使用$,是爲了避免與其餘庫衝突,因此實參用jQuery 
var fn = function($){....}; 
fn(jQuery); 
spa

使用方法:code

顯示遮罩:$("#tabID").tabs("loading",msg) msg--要顯示的信息orm

隱藏遮罩:$("#tabID").tabs("loaded")htm

相關文章
相關標籤/搜索