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

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