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

1 2 3 4 下一页

　　Microsoft AJAX Library 使您能够在客户端页生命周期中管理事件。可以通过处理客户端 PageRequestManager 类的事件来做到这一点。在本演练中，您将了解如何在页上的特定控件导致异步回发时使用 beginRequest 和 pageLoaded 事件来对 UpdatePanel 控件进行动画处理。beginRequest 事件在启动异步回发之前并在将此回发发送到服务器之前引发。pageLoaded 事件在回发和异步回发期间引发。在此事件过程中，可以访问有关因最新回发而被创建和更新的面板的信息。（对于回发，仅可以创建面板；而对于异步回发，则可以创建和更新面板。）

　　先决条件

　　若要在您自己的开发环境中实现这些过程，您需要：

　　Visual Studio 2008 或 Visual Web Developer 2008 速成版。

　　一个支持 AJAX 的 ASP.net 网站。

　　创建对 UpdatePanel 控件进行动画处理的客户端脚本

　　在此过程中，将创建一个定义动画类的 ECMAScript（JavaScript 或 JScript）文件。该类包含对 HTML DOM 元素进行动画处理的方法。在浏览器中，要进行动画处理的 UpdatePanel 控件用一个 div 元素表示。

　　创建对 UpdatePanel 控件进行动画处理的客户端脚本

　　在支持 AJAX 的 ASP.NET 网站中，添加一个 JScript 文件并将其命名为 UpdatePanelAnimation.js。

　　将下面的 JavaScript 代码添加到该文件中：

Type.reGISterNamespace("ScriptLibrary");　
ScriptLibrary.BorderAnimation　=　function(startColor,　endColor,　duration)　{　
　　this._startColor　=　startColor;　
　　this._endColor　=　endColor;　
　　this._duration　=　duration;　
}　
ScriptLibrary.BorderAnimation.prototype　=　{　
　　animatePanel:　function(panelElement)　{　
　　　　var　s　=　panelElement.style;　
　　　　var　startColor　=　this._startColor;　
　　　　var　endColor　=　this._endColor;　
　　　　s.borderColor　=　startColor;　
　　　　window.setTimeout(　
　　　　　　function()　{{　s.borderColor　=　endColor;　}},　
　　　　　　this._duration　
　　　　);　
　　}　
}　
ScriptLibrary.BorderAnimation.registerClass(''ScriptLibrary.BorderAnimation'',　null);　
　
var　panelUpdatedAnimation　=　new　ScriptLibrary.BorderAnimation(''blue'',　''gray'',　1000);　
var　postbackElement;　
　
Sys.Application.add_load(ApplicationLoadHandler);　
function　ApplicationLoadHandler()　{　
　　Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);　
　　Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);　
}　
　
function　beginRequest(sender,　args)　{　
　　postbackElement　=　args.get_postBackElement();　
}　
function　pageLoaded(sender,　args)　{　
　　var　updatedPanels　=　args.get_panelsUpdated();　
　　if　(typeof(postbackElement)　===　"undefined")　{　
　　　　return;　
　　}　
　　else　if　(postbackElement.id.toLowerCase().indexOf(''animate'')　>　-1)　{　
　　　　for　(i=0;　i　<　updatedPanels.length;　i++)　{　　　　　　　
　　　　　　panelUpdatedAnimation.animatePanel(updatedPanels[i]);　
　　　　}　
　　}　
　
}　
if(typeof(Sys)　!==　"undefined")　Sys.Application.notifyScriptLoaded();　
　

(责任编辑：admin)