快速业务通道

对ASP.NET UpdatePanel控件进行动画处理

作者 佚名技术 来源 NET编程 浏览 发布时间 2012-05-20
animatePanel 的方法定义动画逻辑。

通过调用 registerClass 方法为 BorderAnimation 类注册。

创建 BorderAnimation 类的新实例。代码将三个值传递给类构造函数:动画颜色、默认颜色和显示动 画颜色的毫秒数。

定义 Sys.Application 类的 load 事件的处理程序。此类又定义 PageRequestManager 类的 beginRequest 和 pageLoaded 事件的处理程序。

在 beginRequest 事件处理程序中,代码保存导致回发的元素的名称。

如果回发元素的 ID 包含单词“animate”,则代码将在 pageLoaded 事件处理程序中执行动画。

对 UpdatePanel 控件使用客户端脚本

在此过程中,将在包含 UpdatePanel 控件的页中使用动画脚本。当刷新面板的内容时,该脚本将对面 板进行动画处理。

对 UpdatePanel 控件进行动画处理

创建新页并切换到“设计”视图。

如果页面上没有 ScriptManager 控件,请从“工具箱”的“AJAX Extensions”选项卡上拖动一个该 控件到页面上。

在“工具箱”中,双击 UpdatePanel 控件以将 UpdatePanel 控件添加到页面中。

单击 UpdatePanel 控件内部,然后在工具箱的“标准”选项卡中双击 Button 控件两次,向 UpdatePanel 控件添加两个按钮。

将第一个按钮的 Text 属性设置为“以动画方式刷新”,并将其 ID 设置为 AnimateButton1。

将第二个按钮的 Text 属性设置为“不使用动画方式刷新”,并将其 ID 保留为默认值 Button2。

切换到“源”视图,然后将以下样式规则添加到页的 head 元素的 style 块中。

<style type="text/css">
#UpdatePanel1 {
  width: 300px;
  height: 100px;
  border:solid 1px gray;
}
</style>

样式规则定义为 UpdatePanel 控件呈现的 div 元素的高度、宽度和边框。

在 asp:UpdatePanel 元素的 ContentTemplate 元素内部添加以下代码:

<%=DateTime.Now.ToString() %>

此代码显示标记的最新呈现时间。

切换到“设计”视图并选择 ScriptManager 控件。

在“属性”窗口中,选择“脚本”属性并单击省略号 (…) 按钮以显示“ScriptReference 集合编辑 器”对话框。

单击“添加”以添加脚本引用。

将脚本引用的“路径”属性设置为 UpdatePanelAnimation.js,即先前创建的 JavaScript 文件。

使用 ScriptManager 的 Scripts 集合添加脚本引用可确保在 Microsoft AJAX Library 的代码加载 之后加载相应的脚本。

单击“确定”关闭“ScriptReference 集合编辑器”对话框。

保存更改,然后按 Ctrl+F5 在浏览器中查看页面。

单击“刷新”按钮以刷新面板。

请注意,面板边框的颜色会短暂发生变化。

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
   <title>UpdatePanel Animation Example</title>
   <style type="text/css">
   #UpdatePanel1 {
    width: 300px;
    height: 100px;
    border:solid 1px gray;
   }
   </style>
</head>
<body>
   <form id="form1" runat="server">
   <div>
     <asp:ScriptManager ID="Scr

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号