Provádění animací pomocí kódu Client-Side (C#)

Vytvořil 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. Spuštění animace se může aktivovat také pomocí vlastního javascriptového kódu na straně klienta.

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. Spuštění animace se může aktivovat také pomocí vlastního javascriptového kódu na straně klienta.

Kroky

Nejprve zahrňte ScriptManager do stránky; pak se načte knihovna ASP.NET AJAX, aby bylo možné použít Control Toolkit:

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

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

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

Pak přidejte na stránku AnimationExtender, poskytující ID, TargetControlID atribut a povinné runat="server":

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

<Animations> V uzlu použijte <OnClick> ke spuštění animací, jakmile uživatel klikne na panel. Přidejte dvě animace, které se mají spustit paralelně:

<Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Pro účely předvedení se tato animace (a jakákoli jiná animace vytvořená pomocí sady nástrojů Control Toolkit) spustí pomocí kódu JavaScriptu, jakmile se stránka spustí. Nejprve potřebujeme přístup k ovládacímu AnimationExtender prvku. Knihovna ASP.NET AJAX poskytuje $find() funkci pro tuto úlohu:

var ae = $find("ae");

Ovládací AnimationExtender prvek zveřejňuje bohaté rozhraní API, včetně metod s názvy identickými obslužnými rutinami událostí použitými v kódu XML: OnClick(), OnLoad()atd. Například volání OnClick() metody spustí animaci v rámci <OnClick> prvku AnimationExtender ovládacího prvku:

ae.OnClick();

Tady je kompletní klientský JavaScriptový kód, který emuluje kliknutí na panel, jakmile je stránka plně načtena. Všimněte si, že se používá název funkce pageLoad(), který je volán technologií ASP.NET AJAX poté, co je stránka a všechny zahrnuté knihovny JavaScriptu načteny.

<script type="text/javascript">
 function pageLoad() {
 var ae = $find("ae");
 ae.OnClick();
 }
</script>

Animace se spustí okamžitě bez kliknutí myší (kliknutím zobrazíte obrázek v plné velikosti).

PředchozíDalší