Exécution d’animations à l’aide de Client-Side code (C#)

par Christian Wenz

Télécharger le PDF

Le contrôle Animation dans la ASP.NET AJAX Control Toolkit n’est pas seulement un contrôle, mais une infrastructure entière pour ajouter des animations à un contrôle. L’exécution de l’animation peut également être déclenchée à l’aide du code JavaScript côté client personnalisé.

Aperçu

Le contrôle Animation dans la ASP.NET AJAX Control Toolkit n’est pas seulement un contrôle, mais une infrastructure entière pour ajouter des animations à un contrôle. L’exécution de l’animation peut également être déclenchée à l’aide du code JavaScript côté client personnalisé.

Étapes

Tout d'abord, incluez ScriptManager dans la page ; puis, la bibliothèque AJAX ASP.NET est chargée, ce qui permet d’utiliser le 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 cette option <OnClick> pour exécuter les animations une fois que l’utilisateur clique sur le panneau. Ajoutez deux animations à exécuter en parallèle :

<Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Par souci de démonstration, cette animation (et toute autre animation créée à l’aide de Control Toolkit) est exécutée à l’aide du code JavaScript, une fois la page exécutée. Tout d’abord, nous avons besoin d’accéder au AnimationExtender contrôle. La bibliothèque AJAX ASP.NET fournit la $find() fonction pour cette tâche :

var ae = $find("ae");

Le AnimationExtender contrôle expose une API enrichie, y compris des méthodes avec des noms identiques aux gestionnaires d’événements utilisés dans le balisage XML : OnClick(), OnLoad()et ainsi de suite. Par exemple, un appel de la OnClick() méthode exécute l’animation dans l’élément <OnClick> du AnimationExtender contrôle :

ae.OnClick();

Voici le code JavaScript côté client complet qui émule le clic sur le panneau une fois que la page a été entièrement chargée notez que le nom de la pageLoad() fonction est utilisé par ASP.NET AJAX une fois la page et toutes les bibliothèques JavaScript incluses ont été chargées.

<script type="text/javascript">
 function pageLoad() {
 var ae = $find("ae");
 ae.OnClick();
 }
</script>

L’animation s’exécute immédiatement, sans clic de souris (cliquez pour afficher l’image de taille complète)