Udostępnij za pośrednictwem

Zmienianie animacji przy użyciu kodu po stronie klienta (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. Animacja można również zmienić przy użyciu niestandardowego kodu JavaScript po stronie klienta.

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. Animacja można również zmienić przy użyciu niestandardowego kodu JavaScript po stronie klienta.

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>

Rzeczywista animacja jest uruchamiana za pomocą przycisku HTML:

<input type="button" id="Button1" runat="server" value="Launch Animation" />

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

Należy pamiętać, że w kontrolce nie <Animations> ma węzła AnimationExtender . Niestandardowy kod JavaScript służy do udostępniania animacji do użycia z kontrolką.

Podobnie jak w przypadku interfejsu API serwera programu AnimationExtender, nie ma jeszcze łatwego sposobu przypisywania animacji do rozszerzenia. Jednak rozszerzenie uwidacznia kilka metod odczytywania i zapisywania animacji zarejestrowanych w różnych zdarzeniach (OnClickitd OnLoad.). Oto kilka przykładów:

  • get_OnClick()
  • set_OnClick()
  • get_OnLoad()
  • set_OnLoad()
  • ...

Format zwracanej wartości get_*() funkcji i format argumentu dla set_*() funkcji to ciąg JSON, zapewniając reprezentację obiektu narzut na znaczniki XML. Obecnie nie ma możliwości przekazania obiektu, ale istnieje możliwość odczytania obiektu z danej animacji (get_OnXXXBehavior() metod).

Oto ciąg JSON (bez cudzysłowów ograniczników i sformatowany ładnie) reprezentujący animację wyzwalaną przez przycisk, ale animowanie panelu przez zmianę rozmiaru i zanikanie go w tym samym czasie:

{
 "AnimationName":"Sequence",
 "AnimationChildren":[
 {
 "AnimationName":"EnableAction",
 "Enabled":"false",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Parallel",
 "AnimationChildren":[
 {
 "AnimationName":"FadeOut",
 "Duration":"1.5",
 "Fps":"24",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Resize",
 "Width":"1000",
 "Height":"150",
 "Unit":"px",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 }]
 }]
}

Poniższy kod JavaScript przypisuje ten kod JSON do OnClick animacji bieżącego rozszerzenia i uruchamia go:

<script type="text/javascript">
 function pageLoad() 
 {
 var ae = $find("ae");
 var animation = '{"AnimationName":"Sequence","AnimationChildren":[{"AnimationName":"EnableAction","Enabled":"false","AnimationChildren":[]},{"AnimationName":"Parallel","AnimationChildren":[{"AnimationName":"FadeOut","Duration":"1.5","Fps":"24","AnimationTarget":"Panel1","AnimationChildren":[]},{"AnimationName":"Resize","Width":"1000","Height":"150","Unit":"px","AnimationTarget":"Panel1","AnimationChildren":[]}]}]}';
 ae.set_OnClick(animation);
 ae.OnClick();
 }
</script>

Animacja jest uruchamiana natychmiast, bez kliknięcia myszą (i z bardzo małym znacznikiem)

Animacja jest uruchamiana natychmiast bez kliknięcia myszy (i z bardzo małym znacznikiem) (kliknij, aby wyświetlić obraz pełnowymiarowy)

WsteczDalej