模仿Gmail右上角的Loading

用过Gmail的朋友都知道，Gmail右上角有个红色区域是显示Loading的，无论对Gmail进行怎么样的操作，Gmail总是在右上角出现Loading。

它的特点是：

1. Loading只会出现在固定的一个地方。
2. 永远在浏览器的右上角。

实现它：

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，让其总在右上角，实在是太神了，而且速度快，流畅。

< style  type ="text/css" >  
/* <![CDATA[ */  
body  { margin : 0 ;  padding : 0 10px 0 10px ;  border : 0 ;  height : 100% ;  overflow : auto ; }  
#menu  { right : 0 ;  top : 0 ;  width : 130px ;  position : fixed ;  padding : 10px ;  text-align : center ;  font-weight : bold ;  background : #000 ; }  

* html #menu  { position : absolute ;  right : 16px ; } /* only for ie */  
html  { overflow : auto !important ;  overflow : hidden ; }  

/* ]]> */  
</ style >  

.
.
.

< div  id ="menu" >  
< a  href ="#"  title ="Dummy menu item" > Mozilla </ a >  
< a  href ="#"  title ="Dummy menu item" > Opera </ a >  
< a  href ="#"  title ="Dummy menu item" > Netscape </ a >  
< a  href ="#bites"  title ="Dummy menu item" > Firefox </ a >  
< a  href ="#"  title ="Dummy menu item" > IE6 </ a >  
< a  href ="#"  title ="Dummy menu item" > Windows </ a >  
< a  href ="#"  title ="Dummy menu item" > Style </ a >  
< a  href ="#"  title ="Dummy menu item" > CSS </ a >  
</ div >  

 

 总结

对于只有一处固定位置有Loading效果的页面来说，此方法又简单，有方便