easyui Loading效果

 

第一種：原文：http://blog.csdn.net/wwwyuanliang10000/article/details/22577579

//采用jquery easyui loading css效果 
function ajaxLoading(){ 
　　$("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body"); 
　　$("<div class=\"datagrid-mask-msg\"></div>").html("正在處理，請稍候。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2}); 
} 
function ajaxLoadEnd(){ 
　　$(".datagrid-mask").remove(); 
　　$(".datagrid-mask-msg").remove(); 
}

$.ajax({ 
　　type: 'POST', 
　　dataType : 'json',
　　url: url, 
　　data: param, 
　　beforeSend: ajaxLoading,//發送請求前打開進度條
　　success: function(json){ 
　　ajaxLoadEnd();//任務執行成功，關閉進度條
　　} 
});

 

第二種：原文：http://blog.csdn.net/littlewolf766/article/details/7331973

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

使用方法：

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

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