第一种:原文:http://blog.csdn.net/wwwyuanliang10000/article/details/22577579
1 //采用jquery easyui loading css效果 2 function ajaxLoading(){ 3 $("<div class="datagrid-mask"></div>").css({display:"block","100%",height:$(window).height()}).appendTo("body"); 4 $("<div class="datagrid-mask-msg"></div>").html("正在处理,请稍候。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2}); 5 } 6 function ajaxLoadEnd(){ 7 $(".datagrid-mask").remove(); 8 $(".datagrid-mask-msg").remove(); 9 } 10 11 $.ajax({ 12 type: 'POST', 13 dataType : 'json', 14 url: url, 15 data: param, 16 beforeSend: ajaxLoading,//发送请求前打开进度条 17 success: function(json){ 18 ajaxLoadEnd();//任务执行成功,关闭进度条 19 } 20 });
第二种:原文:http://blog.csdn.net/littlewolf766/article/details/7331973
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", 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);
使用方法:
显示遮罩:$("#tabID").tabs("loading",msg) msg--要显示的信息
隐藏遮罩:$("#tabID").tabs("loaded")