Změna animace klientským kódem (C#)
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. Animaci lze také změnit 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. Animaci lze také změnit pomocí vlastního kódu JavaScriptu na straně klienta.
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>
Skutečná animace se spustí tlačítkem HTML:
<input type="button" id="Button1" runat="server" value="Launch Animation" />
Pak přidejte AnimationExtender na stránku IDatribut , TargetControlID atribut a povinný runat="server"parametr :
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1" />
Všimněte si, že v ovládacím AnimationExtender prvku není žádný <Animations> uzel. Vlastní kód JavaScriptu slouží k poskytování animací, které se mají použít s ovládacím prvku.
Stejně jako u rozhraní API AnimationExtenderserveru v systému neexistuje snadný způsob, jak přiřadit animaci k extenderu. Extender však zveřejňuje několik metod pro čtení a zápis animací zaregistrovaných v různých událostech (OnClickatd OnLoad.). Tady je několik příkladů:
get_OnClick()set_OnClick()get_OnLoad()set_OnLoad()...
Formát návratové get_*() hodnoty funkcí a formát argumentu pro set_*() funkce je řetězec JSON, který představuje objektovou reprezentaci kódu XML. V současné době neexistuje způsob, jak objekt předat, ale je možné číst objekt z dané animace (get_OnXXXBehavior() metod).
Tady je řetězec JSON (bez oddělovacích uvozovek a pěkně naformátovaný) představující animaci aktivovanou tlačítkem, ale animuje panel změnou velikosti a jeho zeslábnutím současně:
{
"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":[]
}]
}]
}
Následující kód JavaScriptu přiřadí tento popis json animaci OnClick aktuálního extenderu a spustí ji:
<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>
Animace se spustí okamžitě, bez kliknutí myší (a s velmi malými značkami) (kliknutím zobrazíte obrázek v plné velikosti).
