1

目前我正在一个有 3 个用户控件的页面中工作。当我在一个用户控件中搜索时，我需要放置一个加载图像，我使用了以下代码：

HTML中的div：

<div class="loading">
    <img src="../images/Loading/466.gif" title="Cargando" alt="Cargando" class="Load" />
</div>

Jquery（我在谷歌找到了它，在我看到很多例子之前，我不知道setTimeout这是否有用）

function ShowProgress() {
var table = $("#Table");
table.css("opacity", ".2");

   setTimeout(function () {
        var modal = $('<div />');
        modal.addClass("modal");
        $('table').append(modal);
        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);
        loading.css({ top: top, left: left }
        );
    });
}

还有我的 ASP 按钮（它在用户控件内）：

<asp:Button runat="server" ID="btnSearch" SkinID="botonEstandar" Text="Buscar" OnClick="btnSearch_Click"
                                                     ValidationGroup="BasicFilter" OnClientClick="return ShowProgress();"
                                                    meta:resourcekey="btnSearchResource1" />

我的问题

当我进行搜索时，div 模态显示加载图像，但是我如何阻止页面上用户控件的所有控件？

我真的不知道是否很好显示正在加载。

对不起，如果我做错了什么，但我从 Jquery 开始。

谢谢。

4

2 回答 2

1

你应该试试Block UI Plugin这是一个关于它是如何工作的jsfiddle

因此，您所要做的就是在代码中添加对块 ui 脚本的引用。点击您的搜索按钮，只需调用：

$.blockUI({ message: '<div class="loading"><img src="../images/Loading/466.gif" title="Cargando" alt="Cargando" class="Load" /></div>' });

上面的代码将阻止屏幕上的所有功能并显示您的自定义消息（在这种情况下是您传递给插件的 html）

搜索返回结果后，您应该执行以下操作：

$.unblockUI();

这将删除加载图像，并且用户可以再次与您的页面进行交互。

于 2013-09-03T16:31:46.973 回答
0 
A simple method is there..
on the OnClientclick of your button , hide the main div or panel(which is having your all controls)  using JQuery and just show your div with the loading image. If a post back is happening there, then it is the simple and easy method.

请参阅下面的 aspx 页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ShowProgress() {
            $('#divWithAllControls').hide();
            $('.loading').show();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divWithAllControls">
        <asp:Button runat="server" ID="btnSearch" SkinID="botonEstandar" Text="Buscar" OnClick="btnSearch_Click"
            ValidationGroup="BasicFilter" OnClientClick="return ShowProgress();" meta:resourcekey="btnSearchResource1" />
    </div>
    <div class="loading">
        <img src="../images/Loading/466.gif" title="Cargando" alt="Cargando" class="Load" />
    </div>
    </form>
</body>
</html>
于 2013-09-03T17:02:13.940 回答