Sdílet prostřednictvím

Výběr jedné animace ze seznamu (C#)

  • Č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. Tato architektura také umožňuje programátorům vybrat jednu animaci ze seznamu animací v závislosti na vyhodnocení některého kódu JavaScriptu.

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. Tato architektura také umožňuje programátorům vybrat jednu animaci ze seznamu animací v závislosti na vyhodnocení některého kódu JavaScriptu.

Postup

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

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

Animace se použije na panel textu, který bude vypadat 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ěknou barvu pozadí a také nastavte pevnou šířku panelu:

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

Potom přidejte AnimationExtender na stránku IDatribut , TargetControlID atribut a povinný runat="server":

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

<Animations> V uzlu použijte <OnLoad> ke spuštění animací po úplném načtení stránky. Místo jedné z běžných animací <Case> přichází do hry prvek. Hodnota atributu SelectScript je vyhodnocena; návratová hodnota musí být číselná. V závislosti na tomto čísle se provede jedna z podřízených položek v rámci <případu> . Pokud se například SelectScript vyhodnotí jako 2, sada Control Toolkit spustí třetí animaci v rámci <případu> (počítání začíná na 0).

Následující kód definuje tři dílčí položky: Změna velikosti šířky, změna velikosti výšky a blednutí. Kód JavaScriptu (Math.floor(3 * Math.random())) pak vybere číslo mezi 0 a 2, aby se spustila jedna ze tří animací:

<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žných tří animací: Panel se rozšíří.

Jedna z možných tří animací: Panel se rozšíří (kliknutím zobrazíte obrázek v plné velikosti).

PředchozíDalší