Aktivace animace jiného ovládacího prvku (VB)
Ovládací prvek Animace v ASP.NET AJAX Control Toolkit není jen ovládací prvek, ale celá architektura pro přidání animací do ovládacího prvku. Obecně platí, že spuštění animace se aktivuje interakcí uživatele se stejným ovládacím prvku. Je však také možné s jedním ovládacím prvek pracovat a pak animovat jiný ovládací prvek.
Přehled
Ovládací prvek Animace v ASP.NET AJAX Control Toolkit není jen ovládací prvek, ale celá architektura pro přidání animací do ovládacího prvku. Obecně platí, že spuštění animace se aktivuje interakcí uživatele se stejným ovládacím prvku. Je však také možné s jedním ovládacím prvek pracovat a pak animovat jiný ovládací prvek.
Postup
Nejprve na stránce zahrňte ScriptManager . Pak se načte ASP.NET knihovna AJAX, což umožňuje použití sady nástrojů Control Toolkit:
<asp:ScriptManager ID="asm" runat="server" />
Animace se použije u panelu textu, který vypadá takto:
<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
</asp:Panel>
V přidružené třídě CSS pro panel definujte příjemnou barvu pozadí a také nastavte pevnou šířku panelu:
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
Chcete-li spustit animaci panelu, je použito tlačítko HTML. Všimněte si, že <input type="button" /> je to upřednostněno <asp:Button /> , protože nechceme zpětné odeslání, když uživatel klikne na toto tlačítko.
<input type="button" id="Button1" runat="server" Value="Launch Animation" />
Pak na stránku IDTargetControlID přidejte AnimationExtender , atribut a povinné runat="server". Je důležité nastavit TargetControlID na ID tlačítka (prvek aktivující animaci), ne na ID panelu (prvek je animovaný).
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">
<Animations> V uzlu umístěte animace obvyklým způsobem. Chcete-li změnit panel, nikoli tlačítko, nastavte AnimationTarget atribut pro každý prvek animace v rámci AnimationExtender. Hodnota pro AnimationTarget je samozřejmě ID panelu. Animace se tak budou provádět na panelu, ne na tlačítku pro aktivaci. Tady je AnimationExtender kód pro tento scénář:
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
<Animations>
<OnClick>
<Sequence>
<EnableAction Enabled="false" />
<Parallel>
<FadeOut Duration="1.5" Fps="24" AnimationTarget="Panel1" />
<Resize Width="1000" Height="150" Unit="px"
AnimationTarget="Panel1" />
</Parallel>
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
Všimněte si speciálního pořadí, ve kterém se jednotlivé animace zobrazují. Tlačítko se po spuštění animace deaktivuje. Vzhledem k tomu, že v elementu <EnableAction> není žádný AnimationTarget atribut, použije se tato animace na původní ovládací prvek: tlačítko. Další dva kroky animace se provádějí paralelně (<Parallel> prvek). Oba mají své AnimationTarget atributy nastavené na "Panel1", a proto se animuje panel, nikoli tlačítko.
Kliknutím myši na tlačítko spustíte animaci panelu (kliknutím zobrazíte obrázek v plné velikosti).
