easyui Loading效果

 

第一种：原文：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",width:"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", 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);

使用方法：

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

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

 

 

posted on 2016-03-22 16:37  生命之森  阅读(7138)  评论(0)  编辑  收藏  举报

导航