Question

我有一个网页，其中一个按钮用于检索大量数据。

我需要在按钮点击操作正在进行时显示进度条图像。

如按钮点击我正在下载数据，我遇到的情况是我无法使用更新面板和进度条asp控件。

我尝试过使用jquery和Css。它会在单击按钮时显示图像，但在单击事件完成后不会消失。

HTML：

<asp:LinkButton ID="btnGenReport" runat="server" CssClass="button" Text="Generate" OnClick="btnGenReport_Click" OnClientClick="ProgressBar()"></asp:LinkButton>

CSS：

<style type="text/css">
    .modal
    {
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 99;
        opacity: 0.8;
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        min-height: 100%;
        width: 100%;
    }
    .loading
    {
        font-family: Arial;
        font-size: 10pt;
        display: none;
        position: fixed;
        background-color: White;
        z-index: 999;
    }
</style>

JQuery的：

<script type="text/javascript">
    function ProgressBar(){
        ShowProgress(function(){
            HideProgress();
        });
    }

    function ShowProgress(callback) {
        setTimeout(function () {
            var loading = $(".loading");
            loading.show();
            var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
            var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0) + 93;
            loading.css({ top: top, left: left });
        }, 200);

        callback();
    }

    function HideProgress(){
        var loading = $(".loading");
        loading.css("display","none");
    }
</script>

请帮助获取进度条.....

提前致谢.....

Answer 1

设置超时是异步的。所以，在你的ShowProgress函数中，首先完成的是HideProgress，然后在200ms后显示进度条。

编辑：

function myFunction()
{
    setTimeout(function(){alert("Hello")},3000);
    alert("foo");
}

亲自试试！

我假设您正在使用计时器来模拟服务器正常工作。当您使用ajax将数据发送到服务器时，您将能够使用专用的回调函数，该函数将在执行ajax调用后调用。

所以，或者你直接用ajax尝试它，你必须找到另一个模拟延迟的解决方案。

在Asp.net上的帖子显示进度条

1 个答案: