Memilih Satu Animasi Dari Daftar (VB)

oleh Christian Wenz

Unduh PDF

Kontrol Animasi di ASP.NET AJAX Control Toolkit bukan hanya kontrol tetapi seluruh kerangka kerja untuk menambahkan animasi ke kontrol. Kerangka kerja ini juga memungkinkan programmer untuk memilih satu animasi dari daftar animasi, tergantung pada evaluasi beberapa kode JavaScript.

Gambaran Umum

Kontrol Animasi di ASP.NET AJAX Control Toolkit bukan hanya kontrol tetapi seluruh kerangka kerja untuk menambahkan animasi ke kontrol. Kerangka kerja ini juga memungkinkan programmer untuk memilih satu animasi dari daftar animasi, tergantung pada evaluasi beberapa kode JavaScript.

Langkah-langkah

Pertama-tama, sertakan ScriptManager di halaman; kemudian, pustaka AJAX ASP.NET dimuat, sehingga memungkinkan untuk menggunakan Control Toolkit:

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

Animasi akan diterapkan ke panel teks yang terlihat seperti ini:

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

Di kelas CSS terkait untuk panel, tentukan warna latar belakang yang bagus dan atur juga lebar tetap untuk panel:

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

Kemudian, tambahkan AnimationExtender ke halaman, berikan ID, TargetControlID atribut dan wajib runat="server":

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

Di dalam simpul <Animations> , gunakan <OnLoad> untuk menjalankan animasi setelah halaman dimuat sepenuhnya. Alih-alih salah satu animasi biasa, elemen ini <Case> mulai dimainkan. Nilai atribut SelectScript-nya dievaluasi; nilai yang dikembalikan harus numerik. Tergantung pada nomor ini, salah satu subanimasi dalam <Kasus> dijalankan. Misalnya, jika SelectScript mengevaluasi ke 2, Control Toolkit menjalankan animasi ketiga dalam <Kasus> (penghitungan dimulai dari 0).

Markup berikut mendefinisikan tiga subanimasi: Mengubah ukuran lebar, mengubah ukuran tinggi, dan memudar. Kode JavaScript (Math.floor(3 * Math.random())) kemudian memilih angka antara 0 dan 2, sehingga salah satu dari tiga animasi dijalankan:

<ajaxToolkit:AnimationExtender ID="ae" runat="server"
 TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <Case SelectScript="Math.floor(3 * Math.random())">
 <Resize Width="1000" Unit="px" />
 <Resize Height="150" Unit="px" />
 <FadeOut Duration="1.5" Fps="24" />
 </Case>
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Salah satu dari tiga animasi yang mungkin: Panel menjadi lebih lebar (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya