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>
                            .
   問題解決！