【转】扩展easyUI tab控件，添加加载遮罩效果

在easyui下自己生成遮罩效果的方法

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

效果图：