当前位置: 首页 > news >正文

模仿Gmail右上角的Loading

导读:
  用过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

相关文章:

  • 什么是数字信封?
  • - 转 Ext2.0 form使用实例
  • Ext的layout页面布局解析[转]
  • 【原创】Ext 上传文件,前后台实现, Asp.net 代码
  • jsp request,正确使用. 为什么不能使用 getAttribute 得到保存的数据
  • html 另存为/打印/刷新/查看原文件等按钮的代码!!!
  • 四川汶川地震感言
  • Oracle 导入数据库备份 dmp 文件
  • 丫头的拜托
  • 祝福远方的妹妹高考成功
  • 妹妹的高考,续 ----呵呵,妹妹高考上一本线了,恭喜中.....
  • 妹妹高考续--录取了
  • 163.com 网易的房产频道也会乱码,质疑开发人员和测试人员 http://sh.house.163.com/ !!
  • web.xml中配置spring
  • Struts Hibernate Spring SSH集成碰到的问题
  • 【跃迁之路】【641天】程序员高效学习方法论探索系列(实验阶段398-2018.11.14)...
  • Brief introduction of how to 'Call, Apply and Bind'
  • canvas 五子棋游戏
  • ES6--对象的扩展
  • js面向对象
  • React组件设计模式(一)
  • webpack入门学习手记(二)
  • 大数据与云计算学习:数据分析(二)
  • 小程序、APP Store 需要的 SSL 证书是个什么东西?
  • 新版博客前端前瞻
  • 一道闭包题引发的思考
  • 用 Swift 编写面向协议的视图
  • 原生Ajax
  • 智能合约开发环境搭建及Hello World合约
  • FaaS 的简单实践
  • 如何通过报表单元格右键控制报表跳转到不同链接地址 ...
  • ​​​​​​​Installing ROS on the Raspberry Pi
  • ​LeetCode解法汇总307. 区域和检索 - 数组可修改
  • ​草莓熊python turtle绘图代码(玫瑰花版)附源代码
  • ###项目技术发展史
  • (33)STM32——485实验笔记
  • (9)目标检测_SSD的原理
  • (function(){})()的分步解析
  • (Redis使用系列) Springboot 使用redis的List数据结构实现简单的排队功能场景 九
  • (Repost) Getting Genode with TrustZone on the i.MX
  • (SpringBoot)第二章:Spring创建和使用
  • (动态规划)5. 最长回文子串 java解决
  • (非本人原创)史记·柴静列传(r4笔记第65天)
  • (附源码)计算机毕业设计ssm基于B_S的汽车售后服务管理系统
  • (附源码)计算机毕业设计ssm基于Internet快递柜管理系统
  • (三维重建学习)已有位姿放入colmap和3D Gaussian Splatting训练
  • (一)Spring Cloud 直击微服务作用、架构应用、hystrix降级
  • (原創) 如何使用ISO C++讀寫BMP圖檔? (C/C++) (Image Processing)
  • (转) RFS+AutoItLibrary测试web对话框
  • (转)全文检索技术学习(三)——Lucene支持中文分词
  • ****** 二 ******、软设笔记【数据结构】-KMP算法、树、二叉树
  • .net 逐行读取大文本文件_如何使用 Java 灵活读取 Excel 内容 ?
  • .NET序列化 serializable,反序列化
  • /etc/sudoers (root权限管理)
  • @JsonSerialize注解的使用