Ajax Control Toolkit Animation问题解决

简介:
 还记得上会提到过一个关于 Ajax Control Toolkit Animation的问题 么,就是因为Move等动画效果不支持动态参数或者说方法让我们很被动;
  问题就在于"硬编码",如何解决这个问题呢?我们用下面的场景来说明:在Repeater内容模板里面放上一个CheckBox,绑定数据源;我们的目标是
  在用户勾选一个CheckBox之后,在那条记录上飞出一个商品图片飞向购物车。
  如果我们能使用<Move Horizontal="GetH()" Vertical="GetV()" />方式那么问题就不存在了,现在我们只能<Move Horizontal="150" Vertical="-50" />!
怎么办?我们的关键问题是确定点击的是哪一个CheckBox! 我们的解决方法基于这样两个事实:
  1.虽然我们不能使用动态参数,但是我们可以获得事件源,使用这样的方法:
  
< script  >
 
function a()
{
alert(event.srcElement.value);
alert(event.srcElement.id);
}

</ script >
< b > 如果这个方法可以的话,我们就可以解决动画效果的问题 </ b >< br />
15:21 2007/6/30
</ br >
< input  id =myid  type =button  onclick =a();  value =test ></ input >

2.现在可以取到事件源的ID了,那么怎么确定是哪一个CheckBox呢?因为绑定数据源之后页面上会生成很多CheckBox!
我们仿佛又无路可走,在查看页面源代码的时候我们找到了”救星“,请看:
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl01_ctl00_DataItemCheckBox" 
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl02_ctl00_DataItemCheckBox" 
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl03_ctl00_DataItemCheckBox" 
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl04_ctl00_DataItemCheckBox" 
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl05_ctl00_DataItemCheckBox" 
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl06_ctl00_DataItemCheckBox" 
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl07_ctl00_DataItemCheckBox" 
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl08_ctl00_DataItemCheckBox" 
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl09_ctl00_DataItemCheckBox" 
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl10_ctl00_DataItemCheckBox" 
     
  这是Repeater被解析之后显示的内容,每一个CheckBox都有一个ID,我们还发现了一个ct100 ct101 ct102 ct103 ct110规律,
  通过分析CheckBox的ID我们就可以确定是第几个CheckBox了!!
  
  之后呢?动画的问题还是没有解决!!!不,已经解决了,还记得Condition动画效果么?我们只需要设置一个布尔型数组就可以了;
                            
< Condition  ConditionScript ="flag[0]" >
                               
< Move  Horizontal ="150"  Vertical ="-50"   />
                            
</ Condition >  
                            
< Condition  ConditionScript ="flag[1]" >
                               
< Move  Horizontal ="160"  Vertical ="-60"   />
                            
</ Condition >                                                                                                 

                           
< Condition  ConditionScript ="flag[2]" >
                               
< Move  Horizontal ="170"  Vertical ="-70"   />
                            
</ Condition >  
                            
< Condition  ConditionScript ="flag[3]" >
                               
< Move  Horizontal ="180"  Vertical ="-80"   />
                            
</ Condition >
                            .
   问题解决!
目录
相关文章
|
JavaScript 前端开发
解决js ajax跨越请求 Access control allow origin 异常
// 解决跨越请求的问题 response.setHeader("Access-Control-Allow-Origin", "*");
1364 0
|
JavaScript 前端开发 .NET
ASP.NET AJAX Progress Bar Control(转)
If you use AJAX in your web app's, you no doubt have made use of some sort of progress/status indicator that lets the user know that some operation is currently executing.
816 0
|
Web App开发 JavaScript 前端开发
Ajax Control Toolkit 34个服务器端控件(转载)
1. Accordion 【功能概述】 Accordion可以让你设计多个panel 并且一次只显示一个Panel .在页面上的显示效果就像是使用了多个CollapsiblePanels只不过每一次只展开其中一个CollapsiblePanel.Accordion控件内部包含了若干个AccordionPane,每一个AccordionPane的template里包括了对其Header和Content的定义。
1035 0
N..
|
6月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
65 1
|
6月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
66 0
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
135 0
|
5月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
44 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
3月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
31 0