Désactiver des actions lors d'une animation

Date de publication : 16/05/2009

Par Christian Wenz
 Jérôme Lambert (traducteur) (Page d'accueil)
 

Le contrôle Animation de l'ASP.NET AJAX Control toolkit n'est pas seulement un contrôle mais un framework pour ajouter des animations à un contrôle. Il y a aussi le support d'actions, comme les clics de la souris. Pourtant, lorsqu'un clic de souris démarre une animation, il est souhaitable de désactiver les clics de souris durant l'animation.

               Version PDF (Miroir)   Version hors-ligne (Miroir)

Traduction
Introduction
Etapes


Traduction

Cet article est la traduction la plus fidèle possible de l'article original : en Disabling Actions during Animation


Introduction

Le contrôle Animation de l'ASP.NET AJAX Control toolkit n'est pas seulement un contrôle mais un framework pour ajouter des animations à un contrôle. Il y a aussi le support d'actions, comme les clics de la souris. Pourtant, lorsqu'un clic de souris démarre une animation, il est souhaitable de désactiver les clics de souris durant l'animation.


Etapes

Pour commencer, il faut inclure le ScriptManager dans la page ; l'ASP.NET AJAX library est ensuite chargé, rendant possible l'utilisation du Control Toolkit :

<asp:ScriptManager ID="asm" runat="server" />
L'animation s'appliquera à un bouton HTML comme ceci : 

<input type="button" ID="Button1" runat="server" Value="Lancer Animation" />
Notez qu'un contrôle HTML est utilisé à la place d'un contrôle web puisque nous ne voulons pas qu'un postback soit créé par le bouton ; une animation côté client pourra être ainsi lancée pour nous.

Ensuite, ajoutez l'AnimationExtender à la page, renseignez les attributs ID et TargetControlID et insérez runat="server" qui est obligatoire : 

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">
A l'intérieur de la balise <Animations>, <OnClick> est l'élément approprié pour intercepter le clic de souris. Cependant, le bouton pourrait être cliqué durant l'animation. L'élément <EnableAction> peut s'occuper de ça. L'attribut Enabled="false" désactive le bouton dans le cadre de l'animation. Puisque nous utilisons plusieurs animations individuelles (en désactivant le bouton et les animations actuelles), l'élément <Parallel> est obligatoire pour attacher l'ensemble des animations en une. Ci-dessous 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 aussi 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" />
Cependant, dans le scénario donné, ceci serait inutile puisque le bouton se ferme et n'est donc pas visible à la fin de l'animation.

Le bouton est désactivé dès que l'animation démarre.



               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

Copyright © 2009 Equipe Dotnet. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum Microsoft DotNET

Blogs

Hébergement

 
Partenaires

Hébergement Web