Animációk végrehajtása Client-Side kóddal (C#)

által Christian Wenz

PDF letöltése

Az ASP.NET AJAX Vezérlőeszközkészlet Animáció vezérlője nem csupán vezérlő, hanem egy teljes keretrendszer, amely animációkat adhat hozzá egy vezérlőhöz. Az animáció végrehajtása egyéni ügyféloldali JavaScript-kóddal is aktiválható.

Áttekintés

Az ASP.NET AJAX Vezérlőeszközkészlet Animáció vezérlője nem csupán vezérlő, hanem egy teljes keretrendszer, amely animációkat adhat hozzá egy vezérlőhöz. Az animáció végrehajtása egyéni ügyféloldali JavaScript-kóddal is aktiválható.

Lépések

Először is illessze be a ScriptManager elemet az oldalra, majd töltse be az ASP.NET AJAX-könyvtárat, így használhatja a Vezérlőkészletet.

<asp:ScriptManager ID="asm" runat="server" />

Az animáció a következőhöz hasonló szövegpanelre lesz alkalmazva:

<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>

A panelhez társított CSS-osztályban adjon meg egy szép háttérszínt, és állítsa be a panel rögzített szélességét is:

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

Ezután adja hozzá a AnimationExtender az oldalra, adjon meg egy ID, az TargetControlID attribútumot és a kötelező runat="server":

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">

A <Animations> csomóponton belül, <OnClick> futtassa az animációkat, miután a felhasználó rákattint a panelre. Adjon hozzá két animációt, amelyeket párhuzamosan kell végrehajtani:

<Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

A bemutató kedvéért ezt az animációt (és a Control Toolkit használatával létrehozott bármely más animációt) JavaScript-kóddal hajtja végre a lap futtatása után. Először is hozzáférésre van szükségünk az AnimationExtender irányításhoz. A feladathoz az ASP.NET AJAX-kódtár biztosítja a $find() függvényt:

var ae = $find("ae");

A AnimationExtender vezérlő egy gazdag API-t tesz elérhetővé, beleértve az XML-korrektúrában használt eseménykezelőkkel azonos nevű metódusokat is: OnClick(), OnLoad()stb. Például a OnClick() metódus hívása végrehajtja az animációt a <OnClick> elemben, amely a AnimationExtender vezérlő része.

ae.OnClick();

Itt található a teljes ügyféloldali JavaScript-kód, amely a lap teljes betöltése után emulálja a panelre való kattintást, és figyelje meg, hogy a pageLoad() függvény nevét használja a rendszer, amelyet ASP.NET AJAX hív meg a lap betöltése után, valamint az összes javaScript-kódtárat.

<script type="text/javascript">
 function pageLoad() {
 var ae = $find("ae");
 ae.OnClick();
 }
</script>

Az animáció azonnal, egérkattintás nélkül fut (kattintással megtekintheti a teljes méretű képet)

ElőzőKövetkező