KW的資訊小站

一、Ajax過場 Loading 動畫

1.CSS段，目前是滿版面用半透明白色全頁遮蔽畫面，中間留一點點動畫+文字的寫法。

.Loading_Ajax {
            text-align: center;
            left: -50%;
            float: left;
            position: fixed;
            z-index: 1200;
            height: 200%;
            width: 200%;
            padding: 50% 0 0 0%;
            top: -50%;
            background-color: white;
            opacity: 0.95;
        }

            .Loading_Ajax img {
                height: 1vw;
                width: 4vw;
            }

2.aspx內的寫法，用 UpdateProgress 物件來實踐，在AssociatedUpdatePanelID屬性內去指定對應的UpdatePanel的ID即可。

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
          <ProgressTemplate>
                <div id="DivLoading" align="center" class="Loading_Ajax">
                     <asp:Image ID="LoadingIcon1" CssClass="img" ImageUrl="~/images/ajax-loader.gif" ToolTip="indicator" runat="server" ImageAlign="Middle" />
                         <h4>請稍待，資料處理中...</h4>
                </div>
           </ProgressTemplate>
</asp:UpdateProgress>

3.實際使用的效果，如下圖：

二、JavaScript的Event重新綁定

重新載入的控制項，運用JavaScript重新Bind住前端事件。

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () {
    // 寫成JavaScript 函數 重新放置於此綁定即可
    
});