用Ajax 1.0制作一个按钮提交后UpdatePanel动画
2007-07-11 14:40
579 查看
如何制作使用Ajax 1.0一个按钮提交后台的UpdatePanel动画呢?
这里我制使用了Ajax 1.0制作了当一个LinkButton点击提交后UpdatePanel闪出一个边框的动画.
步骤如下:
1)拖放一个LinkButton控件和一个TextBox控件到页面
<asp:LinkButton ID="ExtraShow1" Text="1234567" runat="server" OnClick="ExtraShow_Click" />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
2)添加一个LinkButton的Click事件,该事件用来将LinkButton中的Text值付给TextBox
protected void ExtraShow_Click(object sender, EventArgs e)
{
TextBox2.Text = ((LinkButton)sender).Text;
}
3)拖放一个UpdatePanel控件,将LinkButton和TextBox控件放入其中.并设置UpdateMode为Conditional.
增加LinkButton的Trigger触发一个AsyncPostBackTrigger
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ExtraShow1" />
</Triggers>
<ContentTemplate>
<fieldset>
<asp:LinkButton ID="ExtraShow1" Text="1234567" runat="server" OnClick="ExtraShow_Click" />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
4)写JavaScript动画方法
<script type="text/javascript">
Type.registerNamespace("ScriptLibrary");//注册一个ScriptLibrary的命名空间
//制作一个BorderAnimation边框动画(如果写过wpf的动画,那么在这里我们会发现这句话很眼熟).
ScriptLibrary.BorderAnimation =
function(color, duration) {
this._color = color;
this._duration = duration;
}
//制作一个边框
ScriptLibrary.BorderAnimation.prototype = {
animatePanel: function(panelElement) {
var s = panelElement.style;
s.borderWidth = '1px';
s.borderColor = this._color;
s.borderStyle = 'solid';
window.setTimeout(
function() {{ s.borderWidth = 0; }},
this._duration
);
}
}
//在动画中注册刚才我们制作的
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);
//定义一个panelUpdatedAnimation用来存储我们做好的边框动画,我们设置成蓝色
var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 1000);
var postbackElement;
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
//我们在BeginRequest事件中获取到页面所有的PostBack元素
function beginRequest(sender, args) {
postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
//在窗体加载事件中我们获取到UpdatePanels
var updatedPanels = args.get_panelsUpdated();
//判断如果没有任何元素返回
if (typeof(postbackElement) === "undefined") {
return;
} //否则查找里面的id中包含extrashow字符的控件,将动画注册到这些控件上
else if (postbackElement.id.toLowerCase().indexOf('ExtraShow1') > -1)
{
for (i=0; i < updatedPanels.length; i++) {
//设置当触发PostBack后在UpdatePanel上调用动画.
panelUpdatedAnimation.animatePanel(updatedPanels[i]);
}
}
}
</script>
其中js部分可能写的有点不太清楚,大虾们看了请指点下.
还 有就是我尝试了添加一个Calender控件使用同样的方法,始终不能加载动画进去,看了下源代码,发现Calender控件生成后是个Table,只有 Table拥有ID.每一个数字中不拥有ID.非常郁闷.大虾们如果知道如何将动画事件加载上去,请教教小弟我~~~~~~~
这里我制使用了Ajax 1.0制作了当一个LinkButton点击提交后UpdatePanel闪出一个边框的动画.
步骤如下:
1)拖放一个LinkButton控件和一个TextBox控件到页面
<asp:LinkButton ID="ExtraShow1" Text="1234567" runat="server" OnClick="ExtraShow_Click" />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
2)添加一个LinkButton的Click事件,该事件用来将LinkButton中的Text值付给TextBox
protected void ExtraShow_Click(object sender, EventArgs e)
{
TextBox2.Text = ((LinkButton)sender).Text;
}
3)拖放一个UpdatePanel控件,将LinkButton和TextBox控件放入其中.并设置UpdateMode为Conditional.
增加LinkButton的Trigger触发一个AsyncPostBackTrigger
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ExtraShow1" />
</Triggers>
<ContentTemplate>
<fieldset>
<asp:LinkButton ID="ExtraShow1" Text="1234567" runat="server" OnClick="ExtraShow_Click" />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
4)写JavaScript动画方法
<script type="text/javascript">
Type.registerNamespace("ScriptLibrary");//注册一个ScriptLibrary的命名空间
//制作一个BorderAnimation边框动画(如果写过wpf的动画,那么在这里我们会发现这句话很眼熟).
ScriptLibrary.BorderAnimation =
function(color, duration) {
this._color = color;
this._duration = duration;
}
//制作一个边框
ScriptLibrary.BorderAnimation.prototype = {
animatePanel: function(panelElement) {
var s = panelElement.style;
s.borderWidth = '1px';
s.borderColor = this._color;
s.borderStyle = 'solid';
window.setTimeout(
function() {{ s.borderWidth = 0; }},
this._duration
);
}
}
//在动画中注册刚才我们制作的
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);
//定义一个panelUpdatedAnimation用来存储我们做好的边框动画,我们设置成蓝色
var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 1000);
var postbackElement;
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
//我们在BeginRequest事件中获取到页面所有的PostBack元素
function beginRequest(sender, args) {
postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
//在窗体加载事件中我们获取到UpdatePanels
var updatedPanels = args.get_panelsUpdated();
//判断如果没有任何元素返回
if (typeof(postbackElement) === "undefined") {
return;
} //否则查找里面的id中包含extrashow字符的控件,将动画注册到这些控件上
else if (postbackElement.id.toLowerCase().indexOf('ExtraShow1') > -1)
{
for (i=0; i < updatedPanels.length; i++) {
//设置当触发PostBack后在UpdatePanel上调用动画.
panelUpdatedAnimation.animatePanel(updatedPanels[i]);
}
}
}
</script>
其中js部分可能写的有点不太清楚,大虾们看了请指点下.
还 有就是我尝试了添加一个Calender控件使用同样的方法,始终不能加载动画进去,看了下源代码,发现Calender控件生成后是个Table,只有 Table拥有ID.每一个数字中不拥有ID.非常郁闷.大虾们如果知道如何将动画事件加载上去,请教教小弟我~~~~~~~
相关文章推荐
- 用Ajax 1.0制作一个按钮提交后UpdatePanel动画
- flash上制作一个按钮,控制动画播放、暂停
- asp.net ajax 1.0中detailview与updatepanel混合使用的例子
- 技巧和诀窍:在ASP.NET AJAX UpdatePanel中实现对后退/前进按钮的支持
- [OpenGL] 制作一个有旋转动画的按钮
- 技巧和诀窍:在ASP.NET AJAX UpdatePanel中实现对后退/前进按钮的支持
- 技巧和诀窍:在ASP.NET AJAX UpdatePanel中实现对后退/前进按钮的支持
- 局部刷新 与 点击按钮弹出窗口 (ajax 控件 updatepanel ModalPopupExtender ) 今天怎么老出问题呢
- 在asp.net ajax 1.0 的updatePanel中如何实现文件下载
- 用 Swift 制作一个漂亮的汉堡按钮过渡动画
- FCKeditor在ASP.NET AJAX的UpdatePanel控件中按钮回调后内容丢失的问题
- AJAX 怎样在一个UpDatePanel中刷新另一个updatePanel
- AJAX 怎样在一个UpDatePanel中刷新另一个updatePanel (asp.net C#)
- 在asp.net ajax 1.0 的updatePanel中如何实现文件下载
- asp.net ajax 1.0中detailview与updatepanel混合使用的例子
- asp.net ajax1.0基础回顾(三):UpdatePanel的基本用法
- AJAX 怎样在一个UpDatePanel中刷新另一个updatePanel
- 用Xamarin.iOS制作一个漂亮的汉堡按钮过渡动画
- 一个Div导致Ajax中UpdatePanel以外的数据执行操作的时候全部消失2012-03-25 10:05
- 新写的一个使用ASP.NET AJAX中的UpdatePanel控件实现GridView的无刷新删除,更新,添加,查询!