Auswählen einer Animation aus einer Liste (C#)

von Christian Wenz

PDF herunterladen

Das Animationssteuerelement im ASP.NET AJAX Control Toolkit ist nicht nur ein Steuerelement, sondern ein ganzes Framework zum Hinzufügen von Animationen zu einem Steuerelement. Das Framework ermöglicht es dem Programmierer auch, eine Animation aus einer Liste von Animationen zu wählen, abhängig von der Auswertung von JavaScript-Code.

Überblick

Das Animationssteuerelement im ASP.NET AJAX Control Toolkit ist nicht nur ein Steuerelement, sondern ein ganzes Framework zum Hinzufügen von Animationen zu einem Steuerelement. Das Framework ermöglicht es dem Programmierer auch, eine Animation aus einer Liste von Animationen zu wählen, abhängig von der Auswertung von JavaScript-Code.

Schritte

Schließen Sie zunächst die ScriptManager auf der Seite ein. Dann wird die ASP.NET AJAX-Bibliothek geladen, sodass das Control Toolkit verwendet werden kann:

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

Die Animation wird auf einen Textbereich angewendet, der wie folgt aussieht:

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

Definieren Sie in der zugeordneten CSS-Klasse für den Bereich eine schöne Hintergrundfarbe, und legen Sie auch eine feste Breite für das Panel fest:

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

Fügen Sie dann der AnimationExtender Seite hinzu, und geben Sie ein ID, das TargetControlID -Attribut und das obligatorische -Element an. runat="server":

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

Verwenden Sie <OnLoad> innerhalb des <Animations> Knotens, um die Animationen auszuführen, nachdem die Seite vollständig geladen wurde. Anstelle einer der regulären Animationen kommt das <Case> Element ins Spiel. Der Wert des SelectScript-Attributs wird ausgewertet. Der Rückgabewert muss numerisch sein. Abhängig von dieser Zahl wird eine der Subanimationen innerhalb <von Case> ausgeführt. Wenn SelectScript für instance als 2 ausgewertet wird, führt das Control Toolkit die dritte Animation in Case> aus <(die Zählung beginnt bei 0).

Das folgende Markup definiert drei Unteranimationen: Ändern der Breite, Ändern der Größe der Höhe und Ausblenden. Der JavaScript-Code (Math.floor(3 * Math.random())) wählt dann eine Zahl zwischen 0 und 2 aus, sodass eine der drei Animationen ausgeführt wird:

<ajaxToolkit:AnimationExtender ID="ae" runat="server"
 TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <Case SelectScript="Math.floor(3 * Math.random())">
 <Resize Width="1000" Unit="px" />
 <Resize Height="150" Unit="px" />
 <FadeOut Duration="1.5" Fps="24" />
 </Case>
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Eine der möglichen drei Animationen: Der Bereich wird breiter (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

ZurückWeiter