Wyłączanie akcji podczas animacji (C#)

Autor Christian Wenz

Pobierz kod lub Pobierz plik PDF

Kontrolka animacji w narzędziu ASP.NET AJAX Control Toolkit nie jest tylko kontrolką, ale całą strukturą służącą do dodawania animacji do kontrolki. Obsługuje także akcje, takie jak kliknięcia myszą. Jednak po kliknięciu przycisku myszy uruchamia animację, pożądane jest wyłączenie kliknięć myszą podczas animacji.

Omówienie

Kontrolka animacji w narzędziu ASP.NET AJAX Control Toolkit nie jest tylko kontrolką, ale całą strukturą służącą do dodawania animacji do kontrolki. Obsługuje także akcje, takie jak kliknięcia myszą. Jednak po kliknięciu przycisku myszy uruchamia animację, pożądane jest wyłączenie kliknięć myszą podczas animacji.

Kroki

Po pierwsze, Uwzględnij ScriptManager na stronie; następnie załadowana zostanie Biblioteka ASP.NET AJAX, co umożliwia korzystanie z zestawu narzędzi kontroli:

<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 zauważyć, że kontrolka HTML jest używana zamiast kontrolki sieci Web, ponieważ nie chcę, aby przycisk utworzył ogłaszanie zwrotne; po prostu uruchamia dla nas animację po stronie klienta.

Następnie Dodaj AnimationExtender do strony, podając ID, atrybut TargetControlID i obowiązkowe runat="server":

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

W węźle <Animations> <OnClick> jest prawym elementem, aby obsłużyć kliknięcie myszą. Jednak przycisk można kliknąć również podczas animacji. Element <EnableAction> może zadbać o to. Ustawienie Enabled="false" wyłącza przycisk w ramach animacji. Ponieważ korzystamy z kilku indywidualnych animacji (wyłączenie przycisku i rzeczywistych animacji), element <Parallel> jest wymagany do przyklejania pojedynczych animacji w jeden. Oto kompletny znacznik dla 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>

Możliwe jest również ponowne włączenie do przycisku po animacji, przy użyciu następującego elementu XML na końcu listy:

<EnableAction Enabled="true" />

Jednak w danym scenariuszu może być bezużyteczny, ponieważ przycisk znika i nie jest widoczny na końcu animacji.

przycisk jest wyłączony zaraz po uruchomieniu animacji

Przycisk jest wyłączony zaraz po uruchomieniu animacji (kliknij, aby wyświetlić obraz o pełnym rozmiarze)