Partager via

Sélection d’une animation dans une liste (C#)

  • Article

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. L’infrastructure permet également au programmeur de choisir une animation dans une liste d’animations, en fonction de l’évaluation d’un certain code JavaScript.

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. L’infrastructure permet également au programmeur de choisir une animation dans une liste d’animations, en fonction de l’évaluation d’un certain code JavaScript.

É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 panneau de texte qui ressemble à ceci :

<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
</asp:Panel>

Dans la classe CSS associée pour le panneau, définissez une couleur d’arrière-plan agréable et définissez également une largeur fixe pour le panneau :

<style type="text/css">    
 .panelClass {background-color: lime; width: 300px;}
</style>

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="Panel1">

Dans le <Animations> nœud, utilisez <OnLoad> pour exécuter les animations une fois la page entièrement chargée. Au lieu de l’une des animations régulières, l’élément <Case> entre en jeu. La valeur de son attribut SelectScript est évaluée ; la valeur de retour doit être numérique. En fonction de ce nombre, l’une des sous-animations dans <Case> est exécutée. Par instance, si SelectScript prend la valeur 2, control Toolkit exécute la troisième animation dans <Case> (le comptage commence à 0).

Le balisage suivant définit trois sous-animations : redimensionnement de la largeur, redimensionnement de la hauteur et disparition. Le code JavaScript (Math.floor(3 * Math.random())) choisit ensuite un nombre compris entre 0 et 2, afin que l’une des trois animations soit exécutée :

<ajaxToolkit:AnimationExtender ID="ae" runat="server"
 TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <Case SelectScript="Math.floor(3 * Math.random())">
 <Resize Width="1000" Unit="px" />
 <Resize Height="150" Unit="px" />
 <FadeOut Duration="1.5" Fps="24" />
 </Case>
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Une des trois animations possibles : le panneau s’élargit

Une des trois animations possibles : le panneau s’élargit (cliquer pour afficher l’image en taille réelle)

PrécédentSuivant