扩展easyUI tab控件,添加加载遮罩效果

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

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

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

修改后的代码:

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

效果图:

扩展easyUI tab控件,添加加载遮罩效果_第1张图片

你可能感兴趣的:(扩展easyUI tab控件,添加加载遮罩效果)