用Ajax 1.0制作一个按钮提交后UpdatePanel动画-xxlinux.com




┊linux社区┊ 爱心援助 ┊ Linux认证┊系列教程 ┊ 业界动态┊ 站务新闻 ┊ 公司招聘┊网络学院┊网址大全 ┊LPI专题┊ CISCO专题

设为首页

加入收藏

管理团队

联盟首页	入门区	安装配置	使用技巧	桌面应用	开发区	WEB开发	数据库	内核研究	SHELL	软件开发
软件下载	网络区	服务器	网络应用	网络安全	UNIX区	UNIX入门	UNIX提高	C专题	JAVA专题	嵌入应用
开发语言	PHP	JSP	ASP	ASP.NET	JAVA	C/C++/C#	PERL	JavaScript	Basic	Delphi

		您的位置：首页 > 开发语言 > asp.net >

栏目导栏

php

JSP

ASP

asp.net

JAVA

c/c++/c#

perl

JavaScript

Basic

Delphi

资料搜索

最新文章

·Ajax Control Toolkit Animati

·讨论一下类似BlogEngine内一次

·使用CSS+SiteMap+UserControl+

·Asp.net中多彩下拉框的实现

·浅谈ASP.NET的Postback

·分清ASP.NET AJAX中的Extender

·Tip：在使用AjaxControlTookit

·有关注册DataItem的一些可能被

·IIRF(Ionic's Isapi Rewrite

用Ajax 1.0制作一个按钮提交后UpdatePanel动画

[ 作者: 加入时间:2007-10-26 13:24:53 来自:Linux联盟收集整理 ]

	如何制作使用Ajax 1.0一个按钮提交后台的UpdatePanel动画呢? fVZLinux联盟 fVZLinux联盟这里我制使用了Ajax 1.0制作了当一个LinkButton点击提交后UpdatePanel闪出一个边框的动画. fVZLinux联盟 fVZLinux联盟 fVZLinux联盟步骤如下: fVZLinux联盟 fVZLinux联盟 1)拖放一个LinkButton控件和一个TextBox控件到页面 fVZLinux联盟 fVZLinux联盟 <asp:LinkButton ID="ExtraShow1" Text="1234567" runat="server" OnClick="ExtraShow_Click" /> fVZLinux联盟 fVZLinux联盟 <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 2)添加一个LinkButton的Click事件,该事件用来将LinkButton中的Text值付给TextBox fVZLinux联盟 fVZLinux联盟 protected void ExtraShow_Click(object sender, EventArgs e) fVZLinux联盟 fVZLinux联盟 { fVZLinux联盟 fVZLinux联盟 TextBox2.Text = ((LinkButton)sender).Text; fVZLinux联盟 fVZLinux联盟 } fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 3)拖放一个UpdatePanel控件,将LinkButton和TextBox控件放入其中.并设置UpdateMode为Conditional. fVZLinux联盟 fVZLinux联盟增加LinkButton的Trigger触发一个AsyncPostBackTrigger fVZLinux联盟 fVZLinux联盟 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> fVZLinux联盟 fVZLinux联盟 <Triggers> fVZLinux联盟 fVZLinux联盟 <asp:AsyncPostBackTrigger ControlID="ExtraShow1" /> fVZLinux联盟 fVZLinux联盟 </Triggers> fVZLinux联盟 fVZLinux联盟 <ContentTemplate> fVZLinux联盟 fVZLinux联盟 <fieldset> fVZLinux联盟 fVZLinux联盟 <asp:LinkButton ID="ExtraShow1" Text="1234567" runat="server" OnClick="ExtraShow_Click" /> fVZLinux联盟 fVZLinux联盟 <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> fVZLinux联盟 fVZLinux联盟 </fieldset> fVZLinux联盟 fVZLinux联盟 </ContentTemplate> fVZLinux联盟 fVZLinux联盟 </asp:UpdatePanel> fVZLinux联盟 fVZLinux联盟 4)写JavaScript动画方法 fVZLinux联盟 fVZLinux联盟 <script type="text/javascript"> fVZLinux联盟 fVZLinux联盟 Type.registerNamespace("ScriptLibrary");//注册一个ScriptLibrary的命名空间 fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 //制作一个BorderAnimation边框动画(如果写过wpf的动画,那么在这里我们会发现这句话很眼熟). fVZLinux联盟 fVZLinux联盟 ScriptLibrary.BorderAnimation = fVZLinux联盟 fVZLinux联盟 function(color, duration) { fVZLinux联盟 fVZLinux联盟 this._color = color; fVZLinux联盟 fVZLinux联盟 this._duration = duration; fVZLinux联盟 fVZLinux联盟 } fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 //制作一个边框 fVZLinux联盟 fVZLinux联盟 ScriptLibrary.BorderAnimation.prototype = { fVZLinux联盟 fVZLinux联盟 animatePanel: function(panelElement) { fVZLinux联盟 fVZLinux联盟 var s = panelElement.style; fVZLinux联盟 fVZLinux联盟 s.borderWidth = '1px'; fVZLinux联盟 fVZLinux联盟 s.borderColor = this._color; fVZLinux联盟 fVZLinux联盟 s.borderStyle = 'solid'; fVZLinux联盟 fVZLinux联盟 window.setTimeout( fVZLinux联盟 fVZLinux联盟 function() {{ s.borderWidth = 0; }}, fVZLinux联盟 fVZLinux联盟 this._duration fVZLinux联盟 fVZLinux联盟 ); fVZLinux联盟 fVZLinux联盟 } fVZLinux联盟 fVZLinux联盟 } fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 //在动画中注册刚才我们制作的 fVZLinux联盟 fVZLinux联盟 ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null); fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 //定义一个panelUpdatedAnimation用来存储我们做好的边框动画,我们设置成蓝色 fVZLinux联盟 fVZLinux联盟 var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 1000); fVZLinux联盟 fVZLinux联盟 var postbackElement; fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest); fVZLinux联盟 fVZLinux联盟 Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded); fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 //我们在BeginRequest事件中获取到页面所有的PostBack元素 fVZLinux联盟 fVZLinux联盟 function beginRequest(sender, args) { fVZLinux联盟 fVZLinux联盟 postbackElement = args.get_postBackElement(); fVZLinux联盟 fVZLinux联盟 } fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 function pageLoaded(sender, args) { fVZLinux联盟 fVZLinux联盟 //在窗体加载事件中我们获取到UpdatePanels fVZLinux联盟 fVZLinux联盟 var updatedPanels = args.get_panelsUpdated(); fVZLinux联盟 fVZLinux联盟 //判断如果没有任何元素返回 fVZLinux联盟 fVZLinux联盟 if (typeof(postbackElement) === "undefined") { fVZLinux联盟 fVZLinux联盟 return; fVZLinux联盟 fVZLinux联盟 } //否则查找里面的id中包含extrashow字符的控件,将动画注册到这些控件上 fVZLinux联盟 fVZLinux联盟 else if (postbackElement.id.toLowerCase().indexOf('ExtraShow1') > -1) fVZLinux联盟 fVZLinux联盟 { fVZLinux联盟 fVZLinux联盟 for (i=0; i < updatedPanels.length; i++) { fVZLinux联盟 fVZLinux联盟 //设置当触发PostBack后在UpdatePanel上调用动画. fVZLinux联盟 fVZLinux联盟 panelUpdatedAnimation.animatePanel(updatedPanels[i]); fVZLinux联盟 fVZLinux联盟 } fVZLinux联盟 fVZLinux联盟 } fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 fVZLinux联盟 } fVZLinux联盟 fVZLinux联盟 </script> fVZLinux联盟 fVZLinux联盟其中js部分可能写的有点不太清楚,大虾们看了请指点下. fVZLinux联盟还有就是我尝试了添加一个Calender控件使用同样的方法,始终不能加载动画进去,看了下源代码,发现Calender控件生成后是个Table,只有Table拥有ID.每一个数字中不拥有ID.非常郁闷.大虾们如果知道如何将动画事件加载上去,请教教小弟我~~~~~~~ fVZLinux联盟 Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论

【评论】【加入收藏夹】【大中小】【打印】【关闭】

※ 相关链接

无相关信息



	© CopyRight 2006-2009 xxlinux.com.Inc All Rights Reserved
	Powered by xxlinux.com