Menciutkan dan Memperluas Panel dari JavaScript (C#)

oleh Christian Wenz

Unduh PDF

Kontrol CollapsiblePanel di ASP.NET AJAX Control Toolkit memperluas panel dan memberinya kemampuan untuk menciutkan kontennya dan memperluasnya lagi. Kedua tindakan ini juga dapat dipicu dari kode JavaScript kustom.

Gambaran Umum

Kontrol CollapsiblePanel di ASP.NET AJAX Control Toolkit memperluas panel dan memberinya kemampuan untuk menciutkan kontennya dan memperluasnya lagi. Kedua tindakan ini juga dapat dipicu dari kode JavaScript kustom.

Langkah-langkah

Pertama-tama, buat halaman ASP.NET baru dan sertakan dalam ScriptManager satu <form> elemen. Ini memuat pustaka AJAX ASP.NET yang diperlukan oleh Control Toolkit:

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

Kemudian, buat panel dengan beberapa teks sehingga efek ciutkan/perluas dapat dilihat:

<asp:Panel ID="Panel1" CssClass="panelClass" runat="server">
 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>

Seperti yang Anda lihat, panel mereferensikan kelas CSS yang ditampilkan di sini (dan pada dasarnya mendefinisikan warna latar belakang dan lebar panel):

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

Kontrol CollapsiblePanelExtender memerlukan TargetControlID atribut sehingga toolkit mengetahui panel mana yang akan diciutkan atau diperluas berdasarkan permintaan:

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server"
 TargetControlID="Panel1" />

Sayangnya, extender saat ini tidak mengekspos API tertentu untuk menciutkan atau memperluas panel, tetapi beberapa metode yang tidak terdokumentasi akan dilakukan. Pertama-tama, tambahkan tiga tombol HTML ke halaman yang kemudian akan memicu JavaScript sisi klien untuk menciutkan atau memperluas konten panel:

<input type="button" id="Button1" runat="server" value="Open" onclick="doOpen();" />
<input type="button" id="Button2" runat="server" value="Close" onclick="doClose();" />
<input type="button" id="Button3" runat="server" value="Toggle" onclick="doToggle();" />

Dalam kode JavaScript sisi klien (dimulai dengan <script type="text/javascript">), $find() metode perlu digunakan untuk mengakses CollapsiblePanelExtender. $find("cpe") akan mengembalikan referensi ke referensi tersebut. Mulai dari sana, metode tertentu akan menyelesaikan tugas yang ada.

Metode untuk membuka (memperluas) panel disebut _doOpen(); kode berikut mengimplementasikan fungsi yang doOpen() dipanggil ketika tombol pertama diklik:

function doOpen() 
{
 $find("cpe")._doOpen();
}

Untuk menutup, atau menciutkan panel, _doClose() metode perlu dijalankan. Jadi, ketika pengguna mengklik tombol kedua, kode JavaScript berikut dipanggil:

function doClose() 
{
 $find("cpe")._doClose();
}

Tombol ketiga mengubah status panel: dari diciutkan menjadi diperluas, dan sebaliknya. mengekspos CollapsiblePanelExtendertoggle() metode yang melakukan persis seperti itu: membalikkan status panel. Namun ada juga pendekatan lain (yang secara internal digunakan oleh toggle() metode ): Metode get_Collapsed() memberi CollapsiblePanelExtender() tahu kami apakah panel diciutkan atau tidak. Bergantung pada nilai yang dikembalikan dari fungsi ini, panel kemudian diperluas (_doOpen() metode) atau metode yang diciutkan (_doClose()):

function doToggle() 
{
 var cpe = $find("cpe");
 //cpe._toggle();
 if (cpe.get_Collapsed()) {
 cpe._doOpen();
 } else {
 cpe._doClose();
 }
}

Tombol ketiga mengubah status panel: dari diciutkan menjadi diperluas dan kembali (Klik untuk melihat gambar ukuran penuh)

Berikutnya