模仿Gmail右上角的Loading

转载 2007年09月26日 11:35:00

用过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"> 
<href="#" title="Dummy menu item">Mozilla</a> 
<href="#" title="Dummy menu item">Opera</a> 
<href="#" title="Dummy menu item">Netscape</a> 
<href="#bites" title="Dummy menu item">Firefox</a> 
<href="#" title="Dummy menu item">IE6</a> 
<href="#" title="Dummy menu item">Windows</a> 
<href="#" title="Dummy menu item">Style</a> 
<href="#" title="Dummy menu item">CSS</a> 
</div> 

 

 总结

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

相关文章推荐

右上角太阳光线flash

  • 2013-10-24 21:50
  • 105KB
  • 下载

android程序右上角ActionBar上显示三个点(overflow)

很多的应用在ActionBar的右上角都有个三个点,在里面有什么设置,登陆等其他功能,如下所示: 这个三个点的设置是Activity类中一个方法,可以在想显示这个三个...

Android右上角弹出菜单

  • 2015-07-30 23:55
  • 1.14MB
  • 下载

右上角popupwindow

  • 2016-07-22 20:09
  • 1024KB
  • 下载

jQuery将div等固定在浏览器右上角的方法

//jQuery将div等固定在浏览器右上角的方法 //$(window):浏览器对象 //$(document.body):body对象 //$(document):文档对象 (functi...

表示右上角的符号用MathType这样编辑

MathType是一款公式编辑器,其中的符号种类非常的全,如果需要编辑一些专业的公式,用它非常的方便快捷。但是有些符号由于不常用,在一些模板之中使用的时候需要深入地去查找调用一下。比如表示右上角的符号...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)