Désactivation d’actions pendant une animation (VB)

par Christian Wenz

Télécharger le PDF

Le contrôle Animation du ASP.NET AJAX Control Toolkit n’est pas seulement un contrôle, mais un framework entier permettant d’ajouter des animations à un contrôle. Il prend également en charge les actions, telles que les clics de souris. Toutefois, lorsqu’un clic de souris démarre une animation, il est souhaitable de désactiver les clics de souris pendant l’animation.

Vue d’ensemble

Le contrôle Animation du ASP.NET AJAX Control Toolkit n’est pas seulement un contrôle, mais un framework entier permettant d’ajouter des animations à un contrôle. Il prend également en charge les actions, telles que les clics de souris. Toutefois, lorsqu’un clic de souris démarre une animation, il est souhaitable de désactiver les clics de souris pendant l’animation.

Étapes

Tout d’abord, incluez le ScriptManager dans la page ; ensuite, le ASP.NET bibliothèque AJAX est chargé, ce qui permet d’utiliser control Toolkit :

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

L’animation sera appliquée à un bouton HTML comme suit :

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

Notez qu’un contrôle HTML est utilisé à la place d’un contrôle web, car nous ne voulons pas que le bouton crée une publication . il doit simplement lancer l’animation côté client pour nous.

Ensuite, ajoutez le AnimationExtender à la page, en fournissant un ID, l’attribut TargetControlID et l’obligatoire runat="server":

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

Dans le <Animations> nœud, <OnClick> est l’élément approprié pour gérer le clic de souris. Toutefois, vous pouvez également cliquer sur le bouton pendant l’animation. L’élément <EnableAction> peut s’en occuper. Le paramètre Enabled="false" désactive le bouton dans le cadre de l’animation. Étant donné que nous utilisons plusieurs animations individuelles (désactivation du bouton et des animations réelles), l’élément <Parallel> est nécessaire pour coller les animations uniques en une seule. Voici le balisage complet pour 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>

Il serait également possible de réactiver le bouton après l’animation, en utilisant l’élément XML suivant à la fin de la liste :

<EnableAction Enabled="true" />

Toutefois, dans le scénario donné, cela serait inutile, car le bouton disparaît et n’est pas visible à la fin de l’animation.

Le bouton est désactivé dès que l’animation s’exécute (Cliquez pour afficher l’image en taille réelle)

PrécédentSuivant