Sdílet prostřednictvím

Animace v reakci na interakci uživatele (VB)

  • Článek

Christian Wenz

Stáhnout PDF

Ovládací prvek Animace v ASP.NET AJAX Control Toolkit není jen ovládací prvek, ale celá architektura pro přidání animací do ovládacího prvku. Animace se můžou spouštět automaticky nebo se můžou aktivovat interakcí uživatele, například kliknutím myší.

Přehled

Ovládací prvek Animace v ASP.NET AJAX Control Toolkit není jen ovládací prvek, ale celá architektura pro přidání animací do ovládacího prvku. Animace se můžou spouštět automaticky nebo se můžou aktivovat interakcí uživatele, například kliknutím myší.

Postup

Nejprve na stránce zahrňte ScriptManager . Pak se načte ASP.NET knihovna AJAX, což umožňuje použití sady nástrojů Control Toolkit:

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

Animace se použije u panelu textu, který vypadá takto:

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

V přidružené třídě CSS pro panel definujte příjemnou barvu pozadí a také nastavte pevnou šířku panelu:

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

Pak na stránku IDTargetControlID přidejte AnimationExtender , atribut a povinný runat="server"parametr :

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

V rámci <Animations> uzlu existuje pět způsobů, jak spustit animaci prostřednictvím interakce uživatele (chybějící prvek se <OnLoad> spustí, jakmile je celá stránka plně načtena):

  • <OnClick> (klikněte myší na ovládací prvek)
  • <OnHoverOut> (myš opustí ovládací prvek)
  • <OnHoverOver> (najedete myší na ovládací prvek a animaci zastavíte <OnHoverOut> ))
  • <OnMouseOut> (myš ponechá ovládací prvek)
  • <OnMouseOver> (najedete myší na ovládací prvek, animace se nezastaví <OnMouseOut> .)

V tomto scénáři <OnClick> se používá . Když uživatel klikne na panel, změní se jeho velikost a zároveň zmizí.

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Kliknutím myši spustíte animaci.

Kliknutím myši spustíte animaci (kliknutím zobrazíte obrázek v plné velikosti).

PředchozíDalší