DataGrid点击上下一页loading效果

最新推荐文章于 2018-07-26 17:36:00 发布

weixin_30646315

最新推荐文章于 2018-07-26 17:36:00 发布

阅读量128

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/servant/p/3829191.html

本文介绍如何使用JS创建一个动态加载显示组件，并在页面请求开始和加载完成时进行展示与隐藏，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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='width: 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; width: 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         }