模仿Gmail右上角的Loading

原创 2007年09月25日 21:14: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效果的页面来说,此方法又简单,有方便。

扩展阅读

 

 

<script type="text/javascript"><!-- google_ad_client = "pub-7753985038232859"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_type = "text_image"; //2007-11-01: blog.csdn.net/allenle google_ad_channel = "6738416815"; google_color_border = "C3D9FF"; google_color_bg = "FFFFFF"; google_color_link = "0000FF"; google_color_text = "000000"; google_color_url = "008000"; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

模仿Gmail右上角的Loading

用过Gmail的朋友都知道,Gmail右上角有个红色区域是显示Loading的,无论对Gmail进行怎么样的操作,Gmail总是在右上角出现Loading。它的特点是: Loading只会出现在...
  • andylaufzf
  • andylaufzf
  • 2007年09月26日 11:35
  • 321

安卓仿微信界面,导航,右上角菜单栏

下面是安卓开发仿微信界面的代码。分为3步,第一步是界面的编写,第二步是导航界面,第三步是右上角菜单栏。开始第一步前先预览一下效果。 第一步,界面。界面的思路是利用ViewPager+Fragment...
  • Chase_Java
  • Chase_Java
  • 2017年03月17日 16:14
  • 4007

Android微信右上角弹出的对话选择框实现

 Android微信右上角弹出的对话选择框实现 我在之前的文章中曾给出了一个开源的微信UI大体实现方案具体代码实现,参见附录文章1。本文单单挑出一个微信的UI实现点:微信右上角弹出的选择对...
  • zhangphil
  • zhangphil
  • 2016年01月08日 11:26
  • 4413

模仿饿了么的加载效果

模仿饿了么的加载效果
  • u014608640
  • u014608640
  • 2016年10月19日 09:22
  • 1150

gmail客户端设置

...
  • Terry001
  • Terry001
  • 2007年06月15日 20:30
  • 7905

仿微信-界面动画(4)-PopupWindow/PopupMenue

PopupMenu代表弹出式菜单,它会在指定组件上弹出PopupMenu,默认情况下,PopupMenu会显示在该组件的下方或上方。PopupMenu可增加多个菜单项,并可为菜单项增加子菜单。使用Po...
  • CL18652469346
  • CL18652469346
  • 2016年08月18日 23:01
  • 460

hosts文件更新与gmail访问解决方案

大家都知道,在我们当前的网络,是无法访问Google相关的服务网址的。这就意味着需要借助《外网访问软件》(Fan * qiang),其实目前大部分的《外网访问软件》都被和谐了,就在前几天,我才知道我经...
  • u011635351
  • u011635351
  • 2017年04月13日 17:56
  • 4456

Gmail邮件客户端pop3和smtp服务器配置

Gmail邮件客户端pop3和smtp服务器配置文章分类:综合技术 Gmail邮件客户端pop3和smtp服务器配置首先在 Gmail 帐户 中启用 POP. 打开 Outlook 或 Outlook...
  • jordonwp
  • jordonwp
  • 2011年03月05日 09:31
  • 5879

如何注册Gmail账号(亲测可用)

  • xuzhiming302
  • xuzhiming302
  • 2018年01月05日 11:21
  • 489

python - 如何通过GMail发送邮件:smtplib的使用

神马事SMTP? 百科名片 SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的...
  • leehark
  • leehark
  • 2012年01月03日 22:06
  • 10085
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:模仿Gmail右上角的Loading
举报原因:
原因补充:

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