Ajax controltoolkit Learning Log-updatepanelanimationextender (30)

The updatepanelanimationextender control is used to create an animation when updatepanel is updated.

Here is an example:

1) Create an ASP. NET Ajax-enabled web project in vs2005 and name it updatepanelanimationextender1.

2) drag and drop an updatepanel on the page, and drag a label in it to display the time. Drag and Drop three checkpoints to set different animation effects.

CodeAs follows:

1 <Div id = "up1" style = "background-color: # 40669a;">
2 <asp: updatepanel id = "updatepanel1" runat = "server">
3 <contenttemplate>
4 <asp: Label id = "label1" runat = "server" text = ""> </ASP: Label>
5 </contenttemplate>
6 <triggers>
7 <asp: asyncpostbacktrigger controlid = "btnupdate"/>
8 </triggers>
9 </ASP: updatepanel>
10 & nbsp; </div>
11 <div>
12 choose the effects, then press 'update': <br/>
13 <input type = "checkbox" id = "effect_fade" Checked = "checked"/> <label for = "effect_fade"> fade </label> <br/>
14 <input type = "checkbox" id = "effect_collapse" Checked = "checked"/> <label for = "effect_collapse"> collapse </label> <br/>
15 <input type = "checkbox" id = "effect_color" Checked = "checked"/> <label for = "effect_color"> color background </label> <br/>
16 <asp: button id = "btnupdate" runat = "server" text = "Update" onclick = "btnupdate_click"/>
17 </div>

3) drag and drop an updatepanelanimationextender on the page to control the animation effect.

The Code is as follows:
<PC3: updatepanelanimationextender id = "updatepanelanimationextender1" behaviorid = "Animation" runat = "server" targetcontrolid = "updatepanel1">
<Animations>
<Onupdating>
<Sequence>
<% -- Store the original height of the panel -- %>
<Scriptaction script = "Var B = $ find ('animation '); B. _ originalheight = B. _ element. offsetheight;"/>
<% -- Disable all the controls -- %>
<Parallel duration = "0">
<Enableaction animationtarget = "btnupdate" enabled = "false"/>
<Enableaction animationtarget = "effect_color" enabled = "false"/>
<Enableaction animationtarget = "effect_collapse" enabled = "false"/>
<Enableaction animationtarget = "effect_fade" enabled = "false"/>
</Parallel>
<Styleaction attribute = "overflow" value = "hidden"/>
<% -- Do each of the selected effects -- %>
<Parallel duration = ". 25" FPS = "30">
<Condition conditionscript = "$ get ('effect _ fade '). Checked">
<Fadeout animationtarget = "up_container" minimumopacity = ". 2"/>
</Condition>
<Condition conditionscript = "$ get ('effect _ collapse'). Checked">
<Resize Height = "0"/>
</Condition>
<Condition conditionscript = "$ get ('effect _ color'). Checked">
<Color animationtarget = "up_container" propertykey = "backgroundcolor"
Endvalue = "# ff0000" startvalue = "# 40669a"/>
</Condition>
</Parallel>
</Sequence>
</Onupdating>
<Onupdated>
<Sequence>
<% -- Do each of the selected effects -- %>
<Parallel duration = ". 25" FPS = "30">
<Condition conditionscript = "$ get ('effect _ fade '). Checked">
<Fadein animationtarget = "up_container" minimumopacity = ". 2"/>
</Condition>
<Condition conditionscript = "$ get ('effect _ collapse'). Checked">
<% -- Get the stored height -- %>
<Resize heightscript = "$ find ('animation '). _ originalheight"/>
</Condition>
<Condition conditionscript = "$ get ('effect _ color'). Checked">
<Color animationtarget = "up_container" propertykey = "backgroundcolor"
Startvalue = "# ff0000" endvalue = "# 40669a"/>
</Condition>
</Parallel>
<% -- Enable all the controls -- %>
<Parallel duration = "0">
<Enableaction animationtarget = "effect_fade" enabled = "true"/>
<Enableaction animationtarget = "effect_collapse" enabled = "true"/>
<Enableaction animationtarget = "effect_color" enabled = "true"/>
<Enableaction animationtarget = "btnupdate" enabled = "true"/>
</Parallel>
</Sequence>
</Onupdated>
</Animations>
</PC3: updatepanelanimationextender>
4) add events to the page_load and "btnupdate" buttons.
The Code is as follows:
Protected void page_load (Object sender, eventargs E)
{
If (! Page. ispostback)
{
This. label1.text = datetime. Now. tostring ();
}
}

Protected void btnupdate_click (Object sender, eventargs E)
{
This. label1.text = datetime. Now. tostring ();
}
5) press Ctrl + F5 to view the effect in the browser.
As follows: