[Ajax control toolkit]UpdatePanelAnimationExtender小小例子

  • 7846
  • 0

[Ajax control toolkit]UpdatePanelAnimationExtender小小例子

相信各位大大都知道Ajax control toolkit 這東西,一些神奇的js特效讓我羨慕不已。

可惜網路上一直鮮少有很棒的範例與解說,這麼多的extender各個屬性該怎麼使用(倒是很多高手都自己去改source code或是出extender的extender)。不過點部落上也有很多高手分享很不錯的文章,例如馬小玲的異想世界

這邊就野人獻曝一下,把一些其實我也不是很懂,但是套上幾乎就可以用的範例,給自己留個back up。

 

首先先介紹一下很炫的UpdatePanelAnimationExtender,只要target指到該物件,就可以針對該物件產生update時的特效。

先介紹他,是因為簡單好用,但是很多特效跟CSS,對我這樣式白癡來說,實在太吃力了,

也請有看到的大大多給點指教。

 

這邊先舉針對update panel來當例子,(也可以是masterpage裡面的ContentPlaceHolder唷)

首先畫面上要有一個updatepanel,裡面還有一個按鈕用來postback,內容就用個小月曆,寬度夠大特效會比較好看。

updatepanel外面在用一個div包起來。

要注意的地方:

1.div的id為”up_container”;

2.updatepanel的id為”update”;

<div id="up_container" style="background-color: #FFFFFF;">
    <ASPExtensions:UpdatePanel ID="update" runat="server">
        <ContentTemplate>
            <asp:Calendar runat="server"></asp:Calendar>
            <asp:Button ID="btnUpdate" runat="server" Text="Update" OnClick="btnUpdate_Click" />
        </ContentTemplate>
        <Triggers>
            <ASPExtensions:AsyncPostBackTrigger ControlID="btnUpdate" EventName="Click" />
        </Triggers>
    </ASPExtensions:UpdatePanel>
</div>

 

有了原始內容之後,當然就是要來玩extender了。

有看到顏色或特效的數據,都可以自行調整看看,怎麼樣會比較好看,我是很沒美感的人,所以獻醜了。

 

<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server"
    TargetControlID="update">
    <Animations>
        <OnUpdating>
            <Sequence>                        
                <Parallel duration="0">
                    <EnableAction AnimationTarget="btnUpdate" Enabled="false" />                            
                </Parallel>
                <StyleAction Attribute="overflow" Value="hidden" />
                                        
                <Parallel duration=".25" Fps="30">
                    <Condition ConditionScript="true">
                        <FadeOut AnimationTarget="up_container" minimumOpacity=".2" />
                    </Condition>                            
                    <Condition ConditionScript="true">
                        <Color AnimationTarget="up_container" PropertyKey="backgroundColor"
                            EndValue="#FF0000" StartValue="#FFFFFF"/>
                    </Condition>
                </Parallel>
            </Sequence>
        </OnUpdating>
        <OnUpdated>
            <Sequence>                        
                <Parallel duration=".25" Fps="30">
                    <Condition ConditionScript="true">
                        <FadeIn AnimationTarget="up_container" minimumOpacity=".2" />
                    </Condition>                           
                    <Condition ConditionScript="true">
                        <Color AnimationTarget="up_container" PropertyKey="backgroundColor"
                            StartValue="#FF0000"  EndValue="#FFFFFF"/>
                    </Condition>
                </Parallel>                                                
                <Parallel duration="0">                            
                    <EnableAction AnimationTarget="btnUpdate" Enabled="true" />
                </Parallel>                            
            </Sequence>
        </OnUpdated>
    </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

 

需要注意的地方:

1.OnUpdating就是正按下update的時候,OnUpdated就是update結束後的特效。

2.OnUpdating時,通常可以在EnableAction,把畫面上control的Enable設成false,來避免重複submit,不過記得OnUpdated要打開,不然按鈕按下去就彈不上來了。

3.BehaviorID="animation",可以供Ajax的js呼叫。(其實這我也不是很熟 XD)

4.特效的區塊是針對div,所以AnimationTarget="up_container",裡面是放div的ID。

5.Condition區塊,是可以下條件判斷要使用哪種特效。

6.FadeOut、FadeIn是一對的特效,數字應該就是隱藏跟顯示的速度。

7.Color想當然爾,EndValue 與StartValue 就是漸層的顏色起頭跟結尾。

8.另一種特效叫做Collapse,不過要算位置,要多一點javascript,還要考慮updatepanel跟GridView根據資料筆數的縮放,上次玩失敗了,就不敢放上來了。

 

目前玩一玩對這些屬性的心得就是只有這樣,希望對大家有幫助。

畫面閃太快,看不到特效的,可以在btnUpdate_Click()裡面,加上Thread.Sleep(3000);


blog 與課程更新內容,請前往新站位置:http://tdd.best/