【原文地址】Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations
【原文发表日期】Thursday, September 21, 2006 1:06 PM
ASP.NET AJAX扩展(即Atlas) 提供的很酷的新控件之一是UpdateProgress控件。这个控件允许你在AJAX回调的进行过程中,自动在页面上显示指定的UI。同时,如果AJAX回调耗时太长,你还可以在UI上提供一个选项让用户来取消AJAX回调。在页面上使用该控件,只须这样声明:
<atlas:UpdateProgress ID=”progress1″ runat=”server”>
<ProgressTemplate>
<div class=”progress”>
<img src=”indicator.gif” />
Please Wait…
</div>
</ProgressTemplate>
</atlas:UpdateProgress>
<ProgressTemplate>
<div class=”progress”>
<img src=”indicator.gif” />
Please Wait…
</div>
</ProgressTemplate>
</atlas:UpdateProgress>
在AJAX回调进行中,<ProgressTemplate>里的内容就会显示。你可以通过CSS将里面的内容显示在页面的任何位置,例如,你可能想直接在GridView或其他元素上方通过渐显效果把它显示出来。开发人员经常使用动画图像显示进度,现在也可以在<ProgressTemplate>里面实现这样的效果。
Alan Le最近发了一个很酷的链接,指向几个非常有用的网站,这些网站提供了许多动画进度的图标。你可以很容易地将它们与UpdateProgress控件结合使用,来显示回调操作的进度:
- http://www.napyfab.com/ajax-indicators/
- http://www.ajaxload.info/
- http://mentalized.net/activity-indicators/
你可以从这几个网站上下载到可用的旋转齿轮和进度图标。下面是几个例子:
本周早些时候,我提到新发布的Atlas控件工具包现在包含了一个动画效果库,可以和ASP.NET AJAX扩展一起使用。与UpdateProgress控件配合使用的话,它们能给你的网站增添很好的视觉效果。
希望本文对你有所帮助,
Scott
打赏作者