Bagaimana membuat panel yang dapat dilipat dengan jQuery di Dreamweaver - dummies

Widget akordeon jQuery UI di Dreamweaver memudahkan panel yang dapat dilipat agar pengunjung dapat membuka dan menutup tanpa menyegarkan halaman web. Fitur jQuery ini memungkinkan Anda memanfaatkan ruang dengan lebih baik pada halaman dengan menampilkan lebih banyak informasi dalam ruang yang lebih sedikit di jendela browser.

Anda dapat melihat bagaimana panel akordeon dilipat berisi nama, foto, dan preferensi habitat setiap burung penyanyi di situs web alam ini. Hasilnya adalah Anda dapat dengan mudah melihat nama semua burung pada satu halaman. Untuk melihat deskripsi burung mana pun, pengguna hanya perlu mengeklik tab di bagian atas panel (di mana nama burung itu muncul), dan panel terbuka seketika.

Foto dan deskripsi untuk warbler yang dinyalakan oranye terbuka sementara yang lainnya di halaman ditutup. Keindahan jQuery adalah halaman tidak harus dimuat ulang agar panel terbuka atau tertutup. Klik sekali pada tab dan panel terbuka seketika. Klik tab lain, dan panel itu terbuka saat panel yang dibuka sebelumnya ditutup.

Panel yang dapat dilipat dapat digunakan untuk menampilkan teks dan gambar serta file multimedia seperti file audio, video, dan Flash.

Untuk melihat panel akordeon (atau banyak fitur canggih lainnya di Dreamweaver) karena akan muncul di browser web, Anda perlu mengklik tombol Live view di bagian kiri atas ruang kerja Dreamweaver.

Setelah membuat satu set panel akordeon dengan menu UI jQuery di Dreamweaver, Anda dapat mengubah sejumlah pengaturan panel dengan menggunakan Property inspector, seperti yang ditunjukkan pada petunjuk berikut.

Ikuti langkah-langkah ini untuk membuat set panel akordeon:

Letakkan kursor pada halaman yang Anda inginkan agar panel akordeon muncul.
Pilih Insert → jQuery UI → Accordion, atau klik item Accordion di panel Insert UI jQuery.

Grup panel akordeon jQuery UI yang dilipat dengan tiga panel muncul di halaman.
Pilih kata Bagian di bagian atas setiap panel, dan gantilah dengan teks yang ingin Anda tampilkan di area Tab panel.

Secara default, teks di area Tab adalah teks biasa, namun Anda dapat mengubahnya dengan mengubah aturan CSS yang sesuai atau memformat teks menggunakan tag HTML, seperti tag judul.
Pilih kata Konten di area utama masing-masing panel, dan masukkan teks atau gambar yang ingin Anda tampilkan.

Anda dapat menempelkan teks ke panel seperti Anda menempelkan teks di tempat lain di laman. Demikian pula, Anda memasukkan gambar ke panel seperti yang Anda inginkan di tempat lain di halaman: Letakkan kursor di panel, pilih Insert → Image → Image, dan pilih file GIF, JPEG, atau PNG yang ingin Anda tampilkan.Anda juga bisa memilih file Photoshop jika ingin menggunakan Dreamweaver untuk mengoptimalkan gambar.

Saat menempelkan teks ke panel, pilih Edit → Paste Special untuk memilih jumlah format yang ingin Anda simpan di teks yang Anda sisipkan di Dreamweaver. Membatasi jumlah format yang dipelihara dapat mengurangi konflik gaya potensial.
Untuk mengubah pengaturan panel, klik tab Accordion jQuery biru di bagian atas panel di area desain.

Bila Anda mengklik tab biru, pengaturan panel akan muncul di Property inspector. (Dengan benar mengklik tab biru bisa jadi rumit, jadi pastikan Anda mengklik area biru.) Klik di tempat lain di halaman, dan inspektur kembali ke pengaturan defaultnya.
Tambahkan atau hapus panel menggunakan bidang Panel di Property inspector.

Untuk menambahkan panel, klik tanda tambah (+) di sebelah kanan bidang Panel. Untuk menghapus panel dari set akordeon, pertama pilih nama panel di daftar drop-down Panel di Property inspector dan kemudian klik tanda minus (@@ min).

Anda dapat menambahkan panel lain dengan mengklik tanda tambah lagi.
Ubah bagaimana panel dibuka dengan menggunakan menu drop-down Event.

Pengaturan acara mengontrol apakah panel terbuka saat pengguna mengklik tab panel (Klik) atau menggulung kursor di atas tab panel (Mouseover).
Tetapkan pilihan panel lain, sesuai keinginan.

Pilihan akordeon di inspektur Properti bersifat opsional, dan mencakup kemampuan untuk menonaktifkan salah satu atau semua panel (Nonaktifkan) dan menghidupkan panel cara untuk membuka dan menutup (Animate drop-down list).
Pilih File → Save untuk menyimpan halaman; ketika kotak dialog Copy Dependent Files muncul, klik OK untuk membuat semua file terkait.

Agar fitur Spry bekerja, Anda harus mengupload file-file ini ke server web Anda saat Anda mengupload halaman web.
Untuk mengubah tampilan panel, seperti warna font atau teks, edit aturan CSS yang sesuai.

Catatan: Anda tidak dapat mengedit gaya yang sesuai untuk panel akordeon sampai halaman telah disimpan dan Dreamweaver telah menghasilkan file CSS dan JavaScript yang sesuai.
Untuk melihat bagaimana panel akan muncul di browser web, klik ikon dunia di bagian atas ruang kerja dan pilih browser yang ingin Anda gunakan untuk melihat pratinjau halaman.

Bila Anda menggunakan komputer Anda untuk melihat pratinjau halaman yang memiliki fitur interaktif yang memerlukan JavaScript atau pemrograman lain, beberapa browser web, termasuk Internet Explorer, akan menampilkan peringatan yang menyatakan bahwa Anda harus mengizinkan kontrol ActiveX untuk melihat halaman tersebut.

Ini adalah peringatan keamanan yang muncul hanya saat halaman dibuka pada komputer yang sama tempat halaman disimpan. Jika Anda mempublikasikan halaman ke server web dan kemudian melihatnya melalui koneksi Internet, kesalahan ini tidak akan muncul untuk Anda atau pengunjung situs Anda.