Udostępnij za pośrednictwem

Wyłączanie akcji podczas animacji (VB)

  • Artykuł

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka Animacja w zestawie narzędzi ASP.NET AJAX Control Toolkit nie tylko jest kontrolką, ale całą strukturą do dodawania animacji do kontrolki. Obsługuje również akcje, takie jak kliknięcia myszy. Jednak gdy kliknięcie myszy uruchamia animację, pożądane jest wyłączenie kliknięć myszy podczas animacji.

Omówienie

Kontrolka Animacja w zestawie narzędzi ASP.NET AJAX Control Toolkit nie tylko jest kontrolką, ale całą strukturą do dodawania animacji do kontrolki. Obsługuje również akcje, takie jak kliknięcia myszy. Jednak gdy kliknięcie myszy uruchamia animację, pożądane jest wyłączenie kliknięć myszy podczas animacji.

Kroki

Najpierw dołącz element ScriptManager na stronie, a następnie załadowano bibliotekę ASP.NET AJAX, umożliwiając korzystanie z zestawu narzędzi control Toolkit:

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

Animacja zostanie zastosowana do przycisku HTML w następujący sposób:

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

Należy pamiętać, że kontrolka HTML jest używana zamiast kontrolki sieci Web, ponieważ nie chcemy, aby przycisk tworzył postback; po prostu uruchomi dla nas animację po stronie klienta.

Następnie dodaj element AnimationExtender do strony, podając IDatrybut , TargetControlID i obowiązkowy runat="server"element :

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

W węźle <Animations><OnClick> jest właściwym elementem do obsługi kliknięcia myszy. Można jednak kliknąć przycisk podczas animacji. Element <EnableAction> może zająć się tym. Ustawienie Enabled="false" wyłącza przycisk w ramach animacji. Ponieważ używamy kilku pojedynczych animacji (wyłączając przycisk i rzeczywiste animacje), <Parallel> element jest wymagany do sklejania pojedynczych animacji w jeden. Oto kompletny znacznik dla AnimationExtenderelementu :

<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>

Można również ponownie włączyć przycisk po animacji przy użyciu następującego elementu XML na końcu listy:

<EnableAction Enabled="true" />

Jednak w danym scenariuszu byłoby to bezużyteczne, ponieważ przycisk zanika i nie jest widoczny na końcu animacji.

Przycisk jest wyłączony zaraz po uruchomieniu animacji

Przycisk jest wyłączony po uruchomieniu animacji (kliknij, aby wyświetlić obraz pełnowymiarowy)

WsteczDalej