Disabilitazione delle azioni durante l'animazione (C#)

di Christian Wenz

Scarica il PDF

Il controllo Animazione nel ASP.NET AJAX Control Toolkit non è solo un controllo ma un intero framework per aggiungere animazioni a un controllo. Supporta anche azioni, come 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 Animazione nel ASP.NET AJAX Control Toolkit non è solo un controllo ma un intero framework per aggiungere animazioni a un controllo. Supporta anche azioni, come 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 usare 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 un controllo HTML viene usato anziché un controllo Web perché non si vuole che il pulsante crei un postback; verrà avviata solo l'animazione lato client per noi.

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

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

All'interno del <Animations> nodo, <OnClick> è l'elemento destro per gestire il clic del mouse. Tuttavia, il pulsante può essere fatto clic anche durante l'animazione. L'elemento <EnableAction> può prendersi cura di questo. L'impostazione Enabled="false" disabilita il pulsante come parte dell'animazione. Poiché si usano diverse singole animazioni (disabilitando il pulsante e le animazioni effettive), è necessario che l'elemento <Parallel> unisce le singole animazioni in una sola. 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>

È 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 poiché il pulsante si scolorisce e non è visibile alla fine dell'animazione.

Il pulsante viene disabilitato non appena viene eseguita l'animazione (Fare clic per visualizzare l'immagine full-size)

IndietroAvanti