Sdílet prostřednictvím

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

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 slouží <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 ukázky se tato animace (a všechny další animace vytvořené pomocí sady Control Toolkit) po spuštění stránky spustí pomocí kódu JavaScriptu. Nejprve potřebujeme přístup k AnimationExtender řízení. Knihovna ASP.NET AJAX poskytuje $find() funkci pro tento úkol:

var ae = $find("ae");

Ovládací AnimationExtender prvek zveřejňuje bohaté rozhraní API, včetně metod s názvy shodnými s 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í kód JavaScriptu na straně klienta, který emuluje kliknutí na panel po úplném načtení stránky. Všimněte si, že pageLoad() se používá název funkce, která je volána ASP.NET AJAX po načtení stránky a všech zahrnutých knihoven JavaScriptu.

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

Animace se spustí okamžitě, bez kliknutí myší

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

PředchozíDalší