Disabilitazione delle azioni durante l'animazione (VB)

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. Supporta anche azioni, ad esempio i clic del mouse. Tuttavia, quando un clic del mouse avvia un'animazione, è consigliabile disabilitare i clic del mouse durante l'animazione.

Panoramica

Il controllo Animation nel ASP.NET AJAX Control Toolkit non è solo un controllo, ma un intero framework per aggiungere animazioni a un controllo. Supporta anche azioni, ad esempio i clic del mouse. Tuttavia, quando un clic del mouse avvia un'animazione, è consigliabile disabilitare i clic del mouse durante l'animazione.

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 pulsante HTML simile al seguente:

<input type="button" ID="Button1" runat="server" Value="Launch Animation" />

Si noti che viene usato un controllo HTML anziché un controllo Web perché non si vuole che il pulsante crei un postback; avvierà solo l'animazione sul lato client per noi.

Aggiungere quindi alla AnimationExtender pagina , fornendo un ID, l'attributo e l'obbligatorio TargetControlIDrunat="server":

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

All'interno del <Animations> nodo è <OnClick> l'elemento destro per gestire il clic del mouse. Tuttavia, è possibile fare clic sul pulsante anche durante l'animazione. L'elemento <EnableAction> può occuparsi di questo. L'impostazione Enabled="false" disabilita il pulsante come parte dell'animazione. Poiché usiamo diverse animazioni singole (disabilitando il pulsante e le animazioni effettive), l'elemento <Parallel> è necessario per associare le singole animazioni in un'unica animazione. Ecco il markup completo per AnimationExtender:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">
 <Animations>
 <OnClick>
 <Parallel>
 <EnableAction Enabled="false" />
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Sarebbe anche possibile riabilitare il pulsante dopo l'animazione, usando l'elemento XML seguente alla fine dell'elenco:

<EnableAction Enabled="true" />

Tuttavia, nello scenario specificato questo sarebbe inutile perché il pulsante si dissolve e non è visibile alla fine dell'animazione.

Il pulsante viene disabilitato non appena viene eseguita l'animazione (fare clic per visualizzare l'immagine a dimensione intera)

IndietroAvanti