Selezione di un'animazione da un elenco (C#)

di Christian Wenz

Scarica il PDF

Il controllo Animation nel ASP.NET AJAX Control Toolkit non è solo un controllo, ma un intero framework per aggiungere animazioni a un controllo. Il framework consente anche al programmatore di selezionare un'animazione da un elenco di animazioni, a seconda della valutazione di un codice JavaScript.

Panoramica

Il controllo Animation nel ASP.NET AJAX Control Toolkit non è solo un controllo, ma un intero framework per aggiungere animazioni a un controllo. Il framework consente anche al programmatore di selezionare un'animazione da un elenco di animazioni, a seconda della valutazione di un codice JavaScript.

Passaggi

Prima di tutto, includere nella ScriptManager pagina; quindi, la libreria ASP.NET AJAX viene caricata, rendendo possibile l'uso di Control Toolkit:

<asp:ScriptManager ID="asm" runat="server" />

L'animazione verrà applicata a un pannello di testo simile al seguente:

<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>

Nella classe CSS associata per il pannello definire un bel colore di sfondo e impostare anche una larghezza fissa per il pannello:

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

Aggiungere quindi alla AnimationExtender pagina , specificando un ID, l'attributo TargetControlID e l'obbligatorio runat="server":

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">

All'interno del <Animations> nodo usare <OnLoad> per eseguire le animazioni dopo il caricamento completo della pagina. Invece di una delle animazioni regolari, l'elemento <Case> entra in gioco. Il valore dell'attributo SelectScript viene valutato; il valore restituito deve essere numerico. A seconda di questo numero, viene eseguita una delle sottoanimazioni all'interno <di Case> . Ad esempio, se SelectScript restituisce 2, Control Toolkit esegue la terza animazione all'interno <di Case> (il conteggio inizia da 0).

Il markup seguente definisce tre sottoanimazioni: ridimensionamento della larghezza, ridimensionamento dell'altezza e dissolvenza. Il codice JavaScript (Math.floor(3 * Math.random())) seleziona quindi un numero compreso tra 0 e 2, in modo che venga eseguita una delle tre animazioni:

<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>

Una delle tre animazioni possibili: il pannello diventa più ampio (fare clic per visualizzare l'immagine a dimensione intera)

IndietroAvanti