Změna animace klientským kódem (VB)
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 je také možné 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 je také možné změnit 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>
Samotná animace se spustí tlačítkem HTML:
<input type="button" id="Button1" runat="server" value="Launch Animation" />
Pak na stránku ID
TargetControlID
přidejte AnimationExtender
, atribut a povinný runat="server"
parametr :
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1" />
Všimněte si, že ovládací prvek neobsahuje AnimationExtender
žá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 serverového AnimationExtender
rozhraní API nástroje zatím 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í registrovaných pomocí různých událostí (OnClick
, OnLoad
atd.). Tady je několik příkladů:
get_OnClick()
set_OnClick()
get_OnLoad()
set_OnLoad()
...
Formát návratové hodnoty get_*()
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()
metody).
Tady je řetězec JSON (bez oddělovacích uvozovek a pěkně naformátovaný), který představuje animaci aktivovanou tlačítkem, ale animuje panel změnou jeho velikosti a jeho vyblednutím ve stejnou dobu:
{
"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í ho:
<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).