Question

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

HTML中的div：

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

Jquery（我在google中找到了它，在我看到很多例子之前，我不知道如果对此有好用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开始。

感谢。

Answer 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();

这将删除加载图片，用户可以再次与您的页面进行互动。

Answer 2

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>

在Asp.net中使用Jquery混淆（用户控件）

2 个答案: