Esecuzione di animazioni tramite codice lato client (VB)
Il controllo Animation nel ASP.NET AJAX Control Toolkit non è solo un controllo, ma un intero framework per aggiungere animazioni a un controllo. L'esecuzione dell'animazione può essere attivata anche usando codice JavaScript lato client personalizzato.
Panoramica
Il controllo Animation nel ASP.NET AJAX Control Toolkit non è solo un controllo, ma un intero framework per aggiungere animazioni a un controllo. L'esecuzione dell'animazione può essere attivata anche usando codice JavaScript lato client personalizzato.
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 , fornendo un ID, l'attributo e l'obbligatorio TargetControlIDrunat="server":
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
All'interno del <Animations> nodo usare <OnClick> per eseguire le animazioni quando l'utente fa clic sul pannello. Aggiungere due animazioni da eseguire in parallelo:
<Animations>
<OnClick>
<Parallel>
<FadeOut Duration="1.5" Fps="24" />
<Resize Width="1000" Height="150" Unit="px" />
</Parallel>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
Ai fini della dimostrazione, questa animazione (e qualsiasi altra animazione creata usando Control Toolkit) viene eseguita usando il codice JavaScript, una volta eseguita la pagina. Prima di tutto è necessario accedere al AnimationExtender controllo. La libreria ASP.NET AJAX fornisce la $find() funzione per questa attività:
var ae = $find("ae");
Il AnimationExtender controllo espone un'API avanzata, inclusi i metodi con nomi identici ai gestori eventi usati nel markup XML: OnClick(), OnLoad()e così via. Ad esempio, una chiamata del OnClick() metodo esegue l'animazione all'interno dell'elemento <OnClick> del AnimationExtender controllo:
ae.OnClick();
Ecco il codice JavaScript sul lato client completo che emula il clic sul pannello dopo che la pagina è stata completamente caricata si noti che il nome della pageLoad() funzione viene usato da ASP.NET AJAX una volta caricata la pagina e tutte le librerie JavaScript incluse.
<script type="text/javascript">
function pageLoad() {
var ae = $find("ae");
ae.OnClick();
}
</script>
L'animazione viene eseguita immediatamente, senza un clic del mouse (fare clic per visualizzare l'immagine a dimensione intera)
