Disabilitazione delle azioni durante l'animazione (C#)
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)
