ASP.Net 2.0 YUI Style UpdateProgress
配合 UpdatePanel 與 UpdateProgress 控制項，在長時間更新的時候，在瀏覽器中央會出現 YUI Style AJAX Progress Indicator，告知使用者畫面更新中。
參考: YUI Style AJAX Progress Indicator
原本懶惰的做法會出現一些問題，就是頁面任何一個 postback 的動作都會讓 UpdateProgress 被觸發，所以改成下面那個版本來過濾觸發的程序。
長與寬現在是用 121 與 35 常數來取代，是因為怎麼抓都抓不到 Panel 的 width 與 height，只好自己用 printscreen 來看實際長寬在各除以 2 而得。
修正後懶惰的做法：
-
<script type="text/javascript" language="javascript">
-
var postBackElementID;
-
Sys.WebForms.PageRequestManager.getInstance ( ).add_beginRequest ( function (sender, args)
-
{
-
postBackElementID = args.get_postBackElement ( ).id.substring (args.get_postBackElement ( ).id.lastIndexOf ( '_' ) + 1 );
-
if (postBackElementID == 'Button' )
-
{
-
$get( '<%= UpdateProgress1.ClientID %>' ).style.display = '';
-
var pnlPopup = $get( '<%= UpdateProgress1.Controls[0].Controls[1].ClientID %>' );
-
pnlPopup.style.display = '';
-
var width = (document.all ) ? document.documentElement.clientWidth : window.innerWidth;
-
var height = (document.all ) ? document.documentElement.clientHeight : window.innerHeight;
-
var x = Math.round (width / 2 ) - 121;
-
var y = Math.round (height / 2 ) - 35;
-
Sys.UI.DomElement.setLocation (pnlPopup, x, y);
-
}
-
} );
-
Sys.WebForms.PageRequestManager.getInstance ( ).add_endRequest ( function (sender, args)
-
{
-
if (postBackElementID == 'Button' )
-
{
-
$get( '<%= UpdateProgress1.ClientID %>' ).style.display = 'none';
-
var pnlPopup = $get( '<%= UpdateProgress1.Controls[0].Controls[1].ClientID %>' );
-
pnlPopup.style.display = 'none';
-
}
-
} );
-
</script>
|
UpdateProgress
-
<asp:UpdateProgress ID="UpdateProgress1" runat="server" >
-
<ProgressTemplate>
-
<asp:Panel ID="pnlPopup" runat="server" CssClass="progress" style = "display: none;" >
-
<div class="Container" style="background: url(Images/sprite.png) repeat-x 0px 0px;" >
-
-
資料載入中, 請耐心等待... </div>
-
-
<asp:Image ID="ImageProgress" runat="server" ImageUrl="Images/activity.gif" />
-
</div>
-
</div>
-
</asp:Panel>
-
</ProgressTemplate>
-
</asp:UpdateProgress>
|