AJAX–UpdateProgress設定CSS元素POSITION的使動畫置中 & loading的Info

http://www.ajaxload.info/  loading的Info
http://www.bigik.cn/blog/article.asp?id=182 

如果你瞭解現在流行的AJAX,一定看到過類似的Loading小動畫:

下面是專門提供這類GIF動畫的幾個網站,也許有一天會用得上。

http://www.ajaxload.info/
這個網站可以按照你輸入的條件即時產生Loading動畫!而且風格是我喜歡的:P

http://mentalized.net/activity-indicators/

http://www.napyfab.com/ajax-indicators/

頁面上用到了Atlas的控制項<atlas:UpdateProgress，以便在進行各種操作時顯示一個等待表徵圖，給使用者解解悶，好讓他們在漫長的等待結果的歲月中不那麼煩躁，知道系統正在忙。

形如：

<asp:UpdateProgress ID="UpdateProgress1" runat="server" >

    <ProgressTemplate>

    <img src="../images/loading.gif" alt="請稍候..." />

</ProgressTemplate>

</asp:UpdateProgress>

可是這樣寫的話表徵圖就歪在一邊，不顯眼。如果寫上個絕對位置，比如

style="position:absolute;left:400px;top:300px;",可這僅僅適合800*600的螢幕，而使用者的螢幕解析度千差萬別。

最後發覺可以用百分比，這樣寫：

<asp:UpdateProgress ID="UpdateProgress1" runat="server" >

    <ProgressTemplate>

    <img src="../images/loading.gif" alt="請稍候..." style="position:absolute;left:50%;top:50%;"/>

</ProgressTemplate>

</asp:UpdateProgress>

 

這樣不管什麼情況下，表徵圖都會居於頁面之中。