导读:
用过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,让其总在右上角,实在是太神了,而且速度快,流畅。
.
.
.
总结
对于只有一处固定位置有Loading效果的页面来说,此方法又简单,有方便。
扩展阅读
关注AJAX(4):ComponentArt,母板页和定制UpdateProgress
详解css定位与定位应用
本文转自
http://blog.csdn.net/allenle/archive/2007/09/25/1800584.aspx
用过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,让其总在右上角,实在是太神了,而且速度快,流畅。
.
.
.
总结
对于只有一处固定位置有Loading效果的页面来说,此方法又简单,有方便。
扩展阅读
关注AJAX(4):ComponentArt,母板页和定制UpdateProgress
详解css定位与定位应用
本文转自
http://blog.csdn.net/allenle/archive/2007/09/25/1800584.aspx