Auswählen einer Animation aus einer Liste (VB)

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

Fügen Sie zunächst die ScriptManager in die Seite ein. Dann wird die ASP.NET AJAX-Bibliothek geladen, sodass Sie das Control Toolkit verwenden können:

<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 den Bereich 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 den Obligatorischen 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 Unteranimationen innerhalb von <Case> ausgeführt. Wenn SelectScript für instance auf 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 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 drei möglichen Animationen: Der Bereich wird breiter (Klicken Sie, um das Bild in voller Größe anzuzeigen)

ZurückWeiter