Client-Side Kodu Kullanarak Animasyon Yürütme (VB)

tarafından Christian Wenz

PDF'i indirin

ASP.NET AJAX Denetim Araç Seti'ndeki Animasyon denetimi yalnızca bir denetim değil, denetime animasyon eklemek için bir çerçevenin tamamıdır. Animasyon yürütme özel istemci tarafı JavaScript kodu kullanılarak da tetiklenebilir.

Genel bakış

ASP.NET AJAX Denetim Araç Seti'ndeki Animasyon denetimi yalnızca bir denetim değil, denetime animasyon eklemek için bir çerçevenin tamamıdır. Animasyon yürütme özel istemci tarafı JavaScript kodu kullanılarak da tetiklenebilir.

Adımlar

Her şeyden önce, sayfaya ScriptManager öğesini ekleyin; ardından ASP.NET AJAX kitaplığı yüklenerek Denetim Araç Seti'nin kullanılmasını mümkün hale getirir:

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

Animasyon, aşağıdaki gibi görünen bir metin paneline uygulanır:

<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>

Panelin ilişkili CSS sınıfında, güzel bir arka plan rengi tanımlayın ve panel için sabit bir genişlik ayarlayın:

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

Ardından, bir ID ve TargetControlID özelliği ile zorunlu runat="server"’ü sağlayarak AnimationExtender öğesini sayfaya ekleyin.

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

Düğümde <Animations>, kullanıcı paneli tıkladığında animasyonları çalıştırmak için <OnClick> kullanın. Paralel olarak yürütülecek iki animasyon ekleyin:

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

Tanıtım amacıyla, sayfa çalıştırıldıktan sonra bu animasyon (ve Denetim Araç Seti kullanılarak oluşturulan diğer animasyonlar) JavaScript kodu kullanılarak yürütülür. İlk olarak AnimationExtender kontrole erişmemiz gerekiyor. ASP.NET AJAX kitaplığı bu görevin işlevini sağlar $find() :

var ae = $find("ae");

Denetim AnimationExtender , XML işaretlemesinde kullanılan olay işleyicileriyle aynı adlara sahip yöntemler de dahil olmak üzere zengin bir API sunar: OnClick(), OnLoad(), vb. Örneğin, OnClick() yönteminin çağrısı animasyonu denetimin AnimationExtender öğesi içindeki <OnClick> içinde yürütür.

ae.OnClick();

Sayfanın ve tüm JavaScript kütüphanelerinin tamamen yüklendiği durumlarda, panele tıklamayı taklit eden tam istemci tarafı JavaScript kodu aşağıda verilmiştir. pageLoad() işlev adının kullanıldığını ve bu işlevin sayfa ve tüm dahil edilen JavaScript kütüphaneleri yüklendikten sonra ASP.NET AJAX tarafından çağrıldığını unutmayın.

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

Animasyon, fare tıklaması olmadan hemen çalışır (Tam boyutlu görüntüyü görüntülemek için tıklayın)

ÖncekiSonraki