Udostępnij za pośrednictwem

Wybieranie jednej animacji z listy (C#)

  • 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. Platforma umożliwia również programistom wybranie jednej animacji z listy animacji, w zależności od oceny kodu JavaScript.

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. Platforma umożliwia również programistom wybranie jednej animacji z listy animacji, w zależności od oceny kodu JavaScript.

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 panelu tekstu, który wygląda następująco:

<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
</asp:Panel>

W skojarzonej klasie CSS panelu zdefiniuj ładny kolor tła, a także ustaw stałą szerokość panelu:

<style type="text/css">    
 .panelClass {background-color: lime; width: 300px;}
</style>

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

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

W węźle użyj polecenia <OnLoad> , aby uruchomić animacje po pełnym załadowaniu <Animations> strony. Zamiast jednej z zwykłych animacji element <Case> wchodzi w grę. Wartość atrybutu SelectScript jest oceniana; wartość zwracana musi być liczbowa. W zależności od tej liczby wykonywana jest jedna z podanimacji w ramach <przypadku> . Jeśli na przykład funkcja SelectScript zwróci wartość 2, zestaw narzędzi control toolkit uruchamia trzecią animację w obszarze <Case> (zliczanie zaczyna się od 0).

Następujące znaczniki definiują trzy podanimacje: Zmiana rozmiaru szerokości, zmiana rozmiaru wysokości i zanikanie. Następnie kod JavaScript (Math.floor(3 * Math.random())) wybiera liczbę z zakresu od 0 do 2, aby uruchomić jedną z trzech animacji:

<ajaxToolkit:AnimationExtender ID="ae" runat="server"
 TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <Case SelectScript="Math.floor(3 * Math.random())">
 <Resize Width="1000" Unit="px" />
 <Resize Height="150" Unit="px" />
 <FadeOut Duration="1.5" Fps="24" />
 </Case>
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Jedna z możliwych trzech animacji: Panel staje się szerszy

Jedna z możliwych trzech animacji: Panel staje się szerszy (kliknij, aby wyświetlić obraz pełnowymiarowy)

WsteczDalej