页面范例1 - 示范如何更新UpdatePanel控件并让它晃动
图5-10所示是页面范例CH5_DemoForm004.aspx的执行画面，我们发现，当您使用鼠标单击超级链接“更新UpdatePanel控件并让它晃动”时，将使得两个UpdatePanel控件的内容都被更新，时，两个UpdatePanel控件会各自显示一个红色外框并随后消失而呈现一种晃动的效果。如果您单击超级链接“更新UpdatePanel控件但是不晃动”则只会使得两个UpdatePanel控件的内容被更新，但是并不会有晃动的效果。
页面范例CH5_DemoForm004.aspx其实就是采用我们先前所述的技巧来设计的，关键在于下列JavaScript程序代码：
<script type="text/javascript">
Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(color, duration) {
this._color = color;
this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
animatePanel: function(panelElement) {
var s = panelElement.style;
s.borderWidth = '2px';
s.borderColor = this._color;
s.borderStyle = 'solid';
window.setTimeout(
function() {{ s.borderWidth = 0; }},
this._duration
);
}
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation');
var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('red', 1000);
// 此变量用来跟踪哪一个元素引发异步回送。
var postbackElement;
// 设定当引发beginRequest 事件时便执行事件处理函数beginRequest。
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
// 设定当引发pageLoaded 事件时便执行事件处理函数pageLoaded。
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
function beginRequest(sender, args) {
// 取得引发异步回送的控件并赋给变量postbackElement。
postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
// 使用PageLoadedEventArgs 类型自变量对象的panelsUpdated 属性来取得一个数组，
// 此数组将内含其内容将被更新的各个UpdatePanel 控件的<div> 标记元素，
// 如果引发异步回送控件的id 属性值内含文本字符串'animate' ，就通过一个循环
// 将数组中每一个<div> 标记元素传递给负责让UpdatePanel 控件晃动起来的函数。
var myUpdatedPanels = args.get_panelsUpdated();
if (typeof(postbackElement) === "undefined") {
return;
}
else if (postbackElement.id.toLowerCase().indexOf('animate') > -1) {
for (i=0; i < myUpdatedPanels.length; i++) {
panelUpdatedAnimation.animatePanel(myUpdatedPanels[i]);
}
}
}
</script>
|
【责任编辑：
夏书 TEL：（010）68476606】
相关文章
