Desabilitar ações durante a animação (VB)

por Christian Wenz

Baixar PDF

O controle Animação no ASP.NET Kit de Ferramentas de Controle AJAX não é apenas um controle, mas uma estrutura inteira para adicionar animações a um controle. Ele também dá suporte a ações, como cliques do mouse. No entanto, quando um clique do mouse inicia uma animação, é desejável desabilitar cliques do mouse durante a animação.

Visão geral

O controle Animação no ASP.NET Kit de Ferramentas de Controle AJAX não é apenas um controle, mas uma estrutura inteira para adicionar animações a um controle. Ele também dá suporte a ações, como cliques do mouse. No entanto, quando um clique do mouse inicia uma animação, é desejável desabilitar cliques do mouse durante a animação.

Etapas

Em primeiro lugar, inclua o ScriptManager na página; em seguida, a biblioteca ASP.NET AJAX é carregada, possibilitando o uso do Kit de Ferramentas de Controle:

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

A animação será aplicada a um botão HTML como este:

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

Observe que um controle HTML é usado em vez de um controle da Web, pois não queremos que o botão crie um postback; ele deve apenas iniciar a animação do lado do cliente para nós.

Em seguida, adicione o AnimationExtender à página, fornecendo um ID, o TargetControlID atributo e o obrigatório runat="server":

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

Dentro do <Animations> nó, <OnClick> é o elemento certo para lidar com o clique do mouse. No entanto, o botão também pode ser clicado durante a animação. O <EnableAction> elemento pode cuidar disso. A configuração Enabled="false" desabilita o botão como parte da animação. Como estamos usando várias animações individuais (desabilitando o botão e as animações reais), o <Parallel> elemento é necessário para colar as animações individuais em uma. Aqui está a marcação completa para 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>

Também seria possível habilitar novamente o botão após a animação, usando o seguinte elemento XML no final da lista:

<EnableAction Enabled="true" />

No entanto, no cenário especificado, isso seria inútil, pois o botão desaparece e não fica visível no final da animação.

O botão é desabilitado assim que a animação é executada (Clique para exibir a imagem em tamanho real)

AnteriorAvançar