Désactivation d’actions pendant une animation (C#)
par Christian Wenz
Le contrôle Animation dans le ASP.NET ajax Control Toolkit n’est pas seulement un contrôle, mais un framework entier pour 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 dans le ASP.NET ajax Control Toolkit n’est pas seulement un contrôle, mais un framework entier pour 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 ; puis, 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 va juste lancer l’animation côté client pour nous.
Ensuite, ajoutez à AnimationExtender la page, en fournissant un ID, l’attribut TargetControlID et le 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 est également possible de réactiver le bouton après l’animation, à l’aide de 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)
