Exécution d’animations à l’aide de Client-Side Code (VB)

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)

PrécédentSuivant