模仿Gmail右上角的Loading
来源:互联网 发布:腾讯视频mac下载 编辑:程序博客网 时间:2024/06/04 19:35
用过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。
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,让其总在右上角,实在是太神了,而且速度快,流畅。
/*<![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效果的页面来说,此方法又简单,有方便。
扩展阅读
- 关注AJAX(4):ComponentArt,母板页和定制UpdateProgress
- 详解css定位与定位应用
<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/allenlegoogle_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右上角的Loading
- 模仿Gmail右上角的Loading
- 类似Gmail和163邮箱删除邮件时在右上角显示的消息框
- 使用c#,WPF,模仿IPhone的Loading(加载)效果
- RAILS实现多张照片同时上传(模仿 GMAIL)
- Gmail Chat (Gmail 里的聊天功能)
- Google Gmail 中 右上角loadinging不论滚动条是否滚动时都不动.
- 首页右上角的flash文件
- MFC对话框右上角的叉叉
- 设置右上角的菜单按钮
- 左上角和右上角的按钮
- 设置按钮右上角的badge
- ubuntu 右上角的”时间“不见了
- 侧滑栏的右上角图标修改
- 我的Gmail
- Gmail的魅力
- 关于Gmail的二三事
- 用DELPHI的RTTI实现数据集的简单对象化
- 实用全文索引
- Apache多站点建立——基于RedHat AS4.0
- 我们为什么要写测试用例?
- 在Solaris上mount Window文件系统
- 模仿Gmail右上角的Loading
- javascript:如何判断客户端操作系统
- 在Solaris上配置宽带连接
- How to troubleshoot TCP/IP connectivity
- 敏捷测试指引(4)- 用面向业务的例子支援项目组
- 中秋节快乐!
- 在VBScript中使用类
- js源码--div实现marquee
- 敏捷测试用例设计