Animasyonları İstemci Tarafı Kod Kullanarak Yürütme (VB)

  • Makale

Christian Wenz tarafından

PDF’yi İndir

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

Adımlar

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

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

Animasyon, aşağıdakine benzer 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 , özniteliğini ve zorunlu runat="server"olan öğesini sağlayarak TargetControlIDIDsayfasına ekleyinAnimationExtender:

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

Düğümde <Animations> , kullanıcı panele tıkladıktan sonra animasyonları çalıştırmak için kullanın <OnClick> . 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, bu animasyon (ve Denetim Araç Seti kullanılarak oluşturulan diğer tüm animasyonlar) sayfa çalıştırıldıktan sonra JavaScript kodu kullanılarak yürütülür. Öncelikle kontrole AnimationExtender 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'yi kullanıma sunar: OnClick(), OnLoad(), vb. Örneğin, yönteminin OnClick() çağrısı animasyonu denetimin <OnClick>AnimationExtender öğesi içinde yürütür:

ae.OnClick();

Sayfa tamamen yüklendikten sonra panele tıklamaya öykünen tam istemci tarafı JavaScript kodu aşağıda, sayfa ve tüm dahil edilen JavaScript kitaplıkları yüklendikten sonra ASP.NET AJAX tarafından çağrılan işlev adının kullanıldığına dikkat edin pageLoad() .

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

Animasyon, fare tıklaması olmadan hemen çalışır

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

ÖncekiSonraki