DataGrid点击上下一页loading效果
js添加显示loading和取消loading方法
1 function showtbloading() { 2 var target = $("#GridView1"); 3 if (target.length <= 0) { 4 $("#tbloading").width($(window).width()); 5 $("#tbloading").height($(window).height()); 6 7 } else { 8 $("#tbloading").width(target.width()); 9 $("#tbloading").height(target.height()); 10 $("#tbloading").css("left", target.offset().left + "px"); 11 $("#tbloading").css("top", target.offset().top + "px"); 12 } 13 $("#tbloading").find("div").eq(0).css("top", ($("#tbloading").height() - 32) / 2); 14 $("#tbloading").show(); 15 } 16 function hidetbloading() { 17 $("#tbloading").hide(); 18 }
html添加loading效果div
<div id="tbloading" style="position: absolute; top: 0px; left: 0px; filter: Alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; background: #777; background-color: White; z-index: 1000; display: none;"> <div style=' 32px; height: 32px; left: 50%; position: relative; text-align: center;'> <center> <img src='/pic/Rotate.gif' alt="" /><br /> <span style='font-size: 13px; font-weight: bolder; 100%; text-align: center;'> </span> </center> </div> </div>
js注册事件
1 Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(PageLoadingHandler); 2 function PageLoadingHandler(sender, args) { 3 showtbloading(); 4 } 5 Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(EndRequest); 6 function EndRequest(sender, args) { 7 hidetbloading(); 8 }