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

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

 <Condition ConditionScript="flag[2]">
                           <Condition ConditionScript="flag[2]">
 <Move Horizontal="170" Vertical="-70" />
                               <Move Horizontal="170" Vertical="-70" />
 </Condition>
                            </Condition> 
 <Condition ConditionScript="flag[3]">
                            <Condition ConditionScript="flag[3]">
 <Move Horizontal="180" Vertical="-80" />
                               <Move Horizontal="180" Vertical="-80" />
 </Condition>
                            </Condition>
 
                            




 .
.
 问题解决!
   问题解决!
问题就在于"硬编码",如何解决这个问题呢?我们用下面的场景来说明:在Repeater内容模板里面放上一个CheckBox,绑定数据源;我们的目标是
在用户勾选一个CheckBox之后,在那条记录上飞出一个商品图片飞向购物车。
如果我们能使用<Move Horizontal="GetH()" Vertical="GetV()" />方式那么问题就不存在了,现在我们只能<Move Horizontal="150" Vertical="-50" />!
 怎么办?我们的关键问题是确定点击的是哪一个CheckBox! 我们的解决方法基于这样两个事实:
怎么办?我们的关键问题是确定点击的是哪一个CheckBox! 我们的解决方法基于这样两个事实: 1.虽然我们不能使用动态参数,但是我们可以获得事件源,使用这样的方法:
  1.虽然我们不能使用动态参数,但是我们可以获得事件源,使用这样的方法: <script >
  <script > function a()
 function a() {
{ alert(event.srcElement.value);
alert(event.srcElement.value); alert(event.srcElement.id);
alert(event.srcElement.id); }
} </script>
</script> <b>如果这个方法可以的话,我们就可以解决动画效果的问题</b><br/>
<b>如果这个方法可以的话,我们就可以解决动画效果的问题</b><br/> 15:21 2007/6/30</br>
15:21 2007/6/30</br> <input id=myid type=button onclick=a(); value=test></input>
<input id=myid type=button onclick=a(); value=test></input>
 2.现在可以取到事件源的ID了,那么怎么确定是哪一个CheckBox呢?因为绑定数据源之后页面上会生成很多CheckBox!
2.现在可以取到事件源的ID了,那么怎么确定是哪一个CheckBox呢?因为绑定数据源之后页面上会生成很多CheckBox! 我们仿佛又无路可走,在查看页面源代码的时候我们找到了”救星“,请看:
我们仿佛又无路可走,在查看页面源代码的时候我们找到了”救星“,请看: id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl01_ctl00_DataItemCheckBox"
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl01_ctl00_DataItemCheckBox"  id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl02_ctl00_DataItemCheckBox"
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl02_ctl00_DataItemCheckBox"  id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl03_ctl00_DataItemCheckBox"
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl03_ctl00_DataItemCheckBox"  id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl04_ctl00_DataItemCheckBox"
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl04_ctl00_DataItemCheckBox"  id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl05_ctl00_DataItemCheckBox"
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl05_ctl00_DataItemCheckBox"  id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl06_ctl00_DataItemCheckBox"
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl06_ctl00_DataItemCheckBox"  id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl07_ctl00_DataItemCheckBox"
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl07_ctl00_DataItemCheckBox"  id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl08_ctl00_DataItemCheckBox"
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl08_ctl00_DataItemCheckBox"  id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl09_ctl00_DataItemCheckBox"
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl09_ctl00_DataItemCheckBox"  id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl10_ctl00_DataItemCheckBox"
id="ctl00_MainContentPlaceHolder_ResourceDataList1_DynamicRepeater1_ctl10_ctl00_DataItemCheckBox"  
      这是Repeater被解析之后显示的内容,每一个CheckBox都有一个ID,我们还发现了一个ct100 ct101 ct102 ct103
  这是Repeater被解析之后显示的内容,每一个CheckBox都有一个ID,我们还发现了一个ct100 ct101 ct102 ct103  ct110规律,
ct110规律, 通过分析CheckBox的ID我们就可以确定是第几个CheckBox了!!
  通过分析CheckBox的ID我们就可以确定是第几个CheckBox了!! 
   之后呢?动画的问题还是没有解决!!!不,已经解决了,还记得Condition动画效果么?我们只需要设置一个布尔型数组就可以了;
  之后呢?动画的问题还是没有解决!!!不,已经解决了,还记得Condition动画效果么?我们只需要设置一个布尔型数组就可以了; <Condition ConditionScript="flag[0]">
                            <Condition ConditionScript="flag[0]"> <Move Horizontal="150" Vertical="-50" />
                               <Move Horizontal="150" Vertical="-50" /> </Condition>
                            </Condition>  <Condition ConditionScript="flag[1]">
                            <Condition ConditionScript="flag[1]"> <Move Horizontal="160" Vertical="-60" />
                               <Move Horizontal="160" Vertical="-60" /> </Condition>
                            </Condition>                                                                                                
 <Condition ConditionScript="flag[2]">
                           <Condition ConditionScript="flag[2]"> <Move Horizontal="170" Vertical="-70" />
                               <Move Horizontal="170" Vertical="-70" /> </Condition>
                            </Condition>  <Condition ConditionScript="flag[3]">
                            <Condition ConditionScript="flag[3]"> <Move Horizontal="180" Vertical="-80" />
                               <Move Horizontal="180" Vertical="-80" /> </Condition>
                            </Condition> 
                            




 .
. 问题解决!
   问题解决! 
                    
                     
                    
                 
                    
                 
 
  
 


 
                
            
         
        