Deaktivieren von Aktionen während der Animation (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. Es unterstützt auch Aktionen, z. B. Mausklicks. Wenn ein Mausklick jedoch eine Animation startet, ist es wünschenswert, während der Animation Mausklicks zu deaktivieren.

Übersicht

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. Es unterstützt auch Aktionen, z. B. Mausklicks. Wenn ein Mausklick jedoch eine Animation startet, ist es wünschenswert, während der Animation Mausklicks zu deaktivieren.

Schritte

Fügen Sie zunächst das ScriptManager in die Seite ein. Anschließend wird die ASP.NET AJAX-Bibliothek geladen, um das Steuerelement-Toolkit nutzen zu können.

<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 die clientseitige Animation nur für uns starten.

Fügen Sie dann AnimationExtender zur Seite hinzu, wobei ein ID, das TargetControlID-Attribut und das obligatorische runat="server" anzugeben sind.

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

Innerhalb des <Animations> Knotens ist das passende Element zum <OnClick> Behandeln des Mausklicks. Es ist jedoch auch möglich, die Schaltfläche während der Animation zu klicken. Das <EnableAction> Element kann dafür sorgen. Durch festlegen Enabled="false" wird die Schaltfläche als Teil der Animation deaktiviert. 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 zusammenzufügen. 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, um das Bild in voller Größe anzuzeigen)