1

选择RadioButtonList和DropDwonList时是否有任何建议加载图像？或者可能在页面加载时输入一些消息，例如“请稍候.. 页面正在加载”。为 AutoPostBack 加载图像。我有一个母版页。

这是网络表单

<td class="auto-style177">
<asp:Panel ID="Panel101" runat="server" Visible="False">
<asp:RadioButtonList ID="rbPembeli2" runat="server" CellPadding="0" CellSpacing="0"
Font-Size="X-Small" Height="20px" RepeatDirection="Horizontal" Width="277px"
AutoPostBack="True" OnSelectedIndexChanged="rbPembeli2_SelectedIndexChanged">
<asp:ListItem Value="9">HQ ANA EDAR</asp:ListItem>
<asp:ListItem Text="PDA/PPN" Value="0"></asp:ListItem>
<asp:ListItem Text="PPP/PPW" Value="5"></asp:ListItem>
</asp:RadioButtonList></asp:Panel>
</td>

这是Js

    function ShowProgress() {
        setTimeout(function () {
            var modal = $('<div />');
            modal.addClass("modal");
            $('body').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 });
        }, 200);
    }
    $('form').live("submit", function () {
        ShowProgress();
    });
4

1 回答 1

1

改变如下，

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Panel ID="Panel101" runat="server" Visible="False">
        <asp:RadioButtonList ID="rbPembeli2" runat="server" CellPadding="0" CellSpacing="0"
        Font-Size="X-Small" Height="20px" RepeatDirection="Horizontal" Width="277px"
        AutoPostBack="True" OnSelectedIndexChanged="rbPembeli2_SelectedIndexChanged">
        <asp:ListItem Value="9">HQ ANA EDAR</asp:ListItem>
        <asp:ListItem Text="PDA/PPN" Value="0"></asp:ListItem>
        <asp:ListItem Text="PPP/PPW" Value="5"></asp:ListItem>
        </asp:RadioButtonList></asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
        <div id="Background">
        </div>
        <div id="Progress">
            <img src="images/loading.gif" alt="" />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

loading.gif，你可以从谷歌下载任何 gif 文件。

包括下面的CSS，

#Background
{
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: Gray;
    filter: alpha(opacity=40);
    opacity: 0.4;
    z-index: 1006;
}
#Progress
{
    position: fixed;
    top: 30%;
    left: 48%;
    z-index: 1006;
}

不要使用任何 JS。

于 2016-04-15T08:42:13.240 回答