Menonaktifkan Tindakan selama Animasi (C#)

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. Ini juga mendukung tindakan, seperti klik mouse. Namun ketika klik mouse memulai animasi, diinginkan untuk menonaktifkan klik mouse selama animasi.

Gambaran Umum

Kontrol Animasi di ASP.NET AJAX Control Toolkit bukan hanya kontrol tetapi seluruh kerangka kerja untuk menambahkan animasi ke kontrol. Ini juga mendukung tindakan, seperti klik mouse. Namun ketika klik mouse memulai animasi, diinginkan untuk menonaktifkan klik mouse selama animasi.

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 tombol HTML seperti ini:

<input type="button" ID="Button1" runat="server" Value="Launch Animation" />

Perhatikan bahwa Kontrol HTML digunakan alih-alih Kontrol Web karena kami tidak ingin tombol membuat postback; itu hanya akan meluncurkan animasi sisi klien untuk kita.

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

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

Dalam simpul <Animations> , <OnClick> adalah elemen yang tepat untuk menangani klik mouse. Namun, tombol juga dapat diklik selama animasi. Elemen <EnableAction> dapat mengurusnya. Pengaturan Enabled="false" menonaktifkan tombol sebagai bagian dari animasi. Karena kita menggunakan beberapa animasi individual (menonaktifkan tombol dan animasi aktual), <Parallel> elemen diperlukan untuk merekatkan animasi tunggal bersama-sama menjadi satu. Berikut adalah markup lengkap untuk AnimationExtender:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">
 <Animations>
 <OnClick>
 <Parallel>
 <EnableAction Enabled="false" />
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Dimungkinkan juga untuk mengaktifkan kembali tombol setelah animasi, menggunakan elemen XML berikut di akhir daftar:

<EnableAction Enabled="true" />

Namun dalam skenario yang diberikan, ini tidak akan berguna karena tombol memudar dan tidak terlihat di akhir animasi.

Tombol dinonaktifkan segera setelah animasi berjalan (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya