模仿Gmail右上角的Loading

导读：
　　用过Gmail的朋友都知道，Gmail右上角有个红色区域是显示Loading的，无论对Gmail进行怎么样的操作，Gmail总是在右上角出现Loading。
　　
　　
　　 它的特点是：
　　Loading只会出现在固定的一个地方。
　　永远在浏览器的右上角。
　　 实现它：
　　 Loading
　　为了实现Loading的效果，在ASP.NET中第一个想到的是Update Progress，在Masterpage中放入一个Update Progress，然后在其他Page_Load中代码设置UpdateProgress.
　　这样做的缺点是每个页面都要有这么一段代码，或者用一个Page类来实现，其他的Page继承之。但，只能和UpdatePanel配合使用，而且，在页面加载的时候是没有Loading的。
　　这里用到了一个很好的解决方法，可以轻松的构造UpdateProgress：
　　使用以下的代码，可以捕捉request的开始和结束，这样没有页面从一开始就能有Loading了。再和UpdatePanel配合，一旦有Request，就能出现Loading。
　　<script type="text/javascript" language="javascript">Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
　　Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler) function BeginRequestHandler(sender, args)
　　{
　　ActivateAlertDiv('visible', 'myUpdatePanel');
　　} function EndRequestHandler(sender, args)
　　{
　　ActivateAlertDiv('hidden', 'myUpdatePanel');
　　} function ActivateAlertDiv(visstring, elem)
　　{var adiv = $get(elem);
　　adiv.style.visibility = visstring;
　　}</script>
　　.
　　.
　　.
　　<script type="text/javascript" language="javascript">
　　ActivateAlertDiv('hidden', 'myUpdatePanel');</script>
　　构建UpdateProgress就很轻松的完成了。
　　 让DIV在右上角
　　一开始想用JavaScript，让Loading DIV的位置随着浏览器的变化而变化，但是发现在滚动浏览器的时候，总不是很流畅。然后想在Loading DIV显示的时候来确定它的位置，但是这样会多出来一些JavaScript代码。
　　 用CSS来解决问题
　　CSS来控制DIV，让其总在右上角，实在是太神了，而且速度快，流畅。
　　
　　.
　　.
　　.

Mozilla Opera Netscape Firefox IE6 Windows Style CSS

　　
　　 总结
　　对于只有一处固定位置有Loading效果的页面来说，此方法又简单，有方便。
　　 扩展阅读
　　关注AJAX(4)：ComponentArt，母板页和定制UpdateProgress
　　详解css定位与定位应用
　　
　　

本文转自
http://blog.csdn.net/allenle/archive/2007/09/25/1800584.aspx