Deaktivieren von Aktionen während einer Animation (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. Außerdem werden Aktionen wie Mausklicks unterstützt. Wenn jedoch mit einem Mausklick eine Animation gestartet wird, ist es wünschenswert, Mausklicks während der Animation zu deaktivieren.

Ü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. Außerdem werden Aktionen wie Mausklicks unterstützt. Wenn jedoch mit einem Mausklick eine Animation gestartet wird, ist es wünschenswert, Mausklicks während der Animation zu deaktivieren.

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 wie folgt auf eine HTML-Schaltfläche angewendet:

<input type="button" ID="Button1" runat="server" Value="Launch Animation" />

Beachten Sie, dass anstelle eines Websteuerelements ein HTML-Steuerelement verwendet wird, da die Schaltfläche kein Postback erstellen soll. sie soll lediglich die clientseitige Animation für uns starten.

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

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

Innerhalb des Knotens <Animations><OnClick> ist das rechte Element, um den Mausklick zu verarbeiten. Es kann jedoch auch während der Animation auf die Schaltfläche geklickt werden. Das <EnableAction> -Element kann dies übernehmen. Die Einstellung Enabled="false" deaktiviert die Schaltfläche als Teil der Animation. Da wir mehrere einzelne Animationen verwenden (Deaktivieren der Schaltfläche und der eigentlichen Animationen), ist das <Parallel> Element erforderlich, um die einzelnen Animationen zu einer zusammenzubinden. Hier ist das vollständige Markup für AnimationExtender:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">
 <Animations>
 <OnClick>
 <Parallel>
 <EnableAction Enabled="false" />
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Es wäre auch möglich, die Schaltfläche nach der Animation mit dem folgenden XML-Element am Ende der Liste erneut zu aktivieren:

<EnableAction Enabled="true" />

Im gegebenen Szenario wäre dies jedoch nutzlos, da die Schaltfläche ausgeblendet wird und am Ende der Animation nicht sichtbar ist.

Die Schaltfläche wird deaktiviert, sobald die Animation ausgeführt wird (Klicken Sie hier, um das Bild in voller Größe anzuzeigen).

ZurückWeiter