Cara Membuat Panel Lipat dengan jQuery di Dreamweaver - dummies

Widget accordion jQuery UI di Dreamweaver menjadikannya mudah untuk menambah panel lipat yang pengunjung tapak boleh membuka dan menutup tanpa menyegarkan halaman web. Ciri jQuery ini membolehkan anda menggunakan ruang yang lebih baik pada halaman dengan memaparkan lebih banyak maklumat dalam ruang kurang dalam tetingkap penyemak imbas.

Anda dapat melihat bagaimana panel collapsible akordion mengandungi pilihan nama, foto, dan habitat setiap lagu burung di laman sesawang ini. Hasilnya ialah anda boleh dengan mudah melihat nama semua burung pada satu halaman. Untuk melihat keterangan mana-mana burung, pengguna hanya perlu klik tab di bahagian atas panel (di mana nama burung muncul), dan panel terbuka dengan serta-merta.

Foto dan keterangan untuk warbler yang dimahkotai oren terbuka manakala yang lain pada halaman ditutup. Keindahan jQuery adalah bahawa halaman itu tidak perlu dimuat semula untuk panel terbuka atau ditutup. Klik sekali pada tab dan panel terbuka serta-merta. Klik tab lain, dan panel itu terbuka apabila panel dibuka sebelum ini ditutup.

Panel lipat boleh digunakan untuk memaparkan teks dan gambar serta fail multimedia seperti audio, video, dan fail Flash.

Untuk melihat panel akordion (atau banyak ciri canggih lain dalam Dreamweaver) kerana ia akan muncul dalam penyemak imbas web, anda perlu mengklik butang Paparan Langsung di kiri atas ruang kerja Dreamweaver.

Selepas anda membuat satu panel akordion dengan menu UI jQuery di Dreamweaver, anda boleh menukar beberapa tetapan panel dengan menggunakan pemeriksa harta, seperti yang ditunjukkan dalam arahan yang berikut.

Ikuti langkah-langkah ini untuk membuat set panel akordion:

Letakkan kursor anda pada halaman yang anda mahu panel akordion muncul.
Pilih Insert → jQuery UI → Akordion, atau klik item Akordion dalam panel Sisipan UI jQuery.

Kumpulan panel akordion jQuery UI yang dilipat dengan tiga panel muncul di halaman.
Pilih perkataan Section di bahagian atas setiap panel, dan gantikannya dengan teks yang anda mahu muncul di kawasan Tab panel.

Secara lalai, teks dalam kawasan Tab adalah teks biasa, tetapi anda boleh mengubahnya dengan mengubah aturan CSS yang sepadan atau memformat teks menggunakan tag HTML, seperti tag tajuk.
Pilih perkataan Kandungan di bahagian utama setiap panel, dan masukkan sebarang teks atau imej yang anda mahu paparkan.

Anda boleh menampal teks ke dalam panel seperti yang anda akan paste teks di mana-mana sahaja di halaman. Begitu juga, anda memasukkan imej ke dalam panel seperti mana anda berada di tempat lain: Letakkan kursor anda di panel, pilih Masukkan → Imej → Imej, dan pilih fail GIF, JPEG, atau PNG yang anda mahu paparkan.Anda juga boleh memilih fail Photoshop jika anda mahu menggunakan Dreamweaver untuk mengoptimumkan imej.

Apabila anda menampal teks ke dalam panel, pilih Edit → Paste Special untuk memilih jumlah pemformatan yang anda ingin simpan dalam teks yang anda tampal di Dreamweaver. Mengehadkan jumlah pemformatan yang dipelihara dapat mengurangkan kemungkinan konflik gaya.
Untuk menukar tetapan panel, klik tab Akordion jQuery biru di bahagian atas panel di kawasan reka bentuk.

Apabila anda mengklik tab biru, tetapan panel muncul di inspektur Harta. (Dengan betul mengklik tab biru boleh menjadi rumit, jadi pastikan anda mengklik kawasan biru.) Klik di tempat lain di halaman, dan pemeriksa kembali ke tetapan lalainya.
Tambah atau alih keluar panel menggunakan medan Panel di pemeriksa Hartanah.

Untuk menambah panel, klik tanda tambah (+) di sebelah kanan medan Panel. Untuk mengeluarkan panel dari set accordion, mula-mula pilih nama panel dalam senarai drop-down Panels di pemeriksa Harta dan kemudian klik tanda tolak (@@ min).

Anda boleh menambah panel lain dengan mengklik tanda tambah sekali lagi.
Tukar bagaimana panel dibuka dengan menggunakan menu lungsur Acara.

Tetapan Acara mengawal sama ada panel dibuka apabila pengguna mengklik tab panel (Klik) atau menggulung kursor ke atas tab panel (Mouseover).
Tetapkan pilihan panel lain, seperti yang dikehendaki.

Pilihan akordion di Pemeriksa Hartanah adalah pilihan, dan termasuk keupayaan untuk melumpuhkan mana-mana atau semua panel (Disable) dan bernyawa cara panel terbuka dan tutup (Animate drop-down list).
Pilih Fail → Simpan untuk menyimpan halaman; apabila kotak dialog Copy Dependent Files muncul, klik OK untuk menghasilkan semua fail yang berkaitan.

Untuk ciri Spry untuk berfungsi, anda mesti memuat naik fail ini ke pelayan web anda apabila anda memuat naik halaman web.
Untuk menukar rupa panel, seperti wajah font atau warna teks, edit peraturan CSS yang sepadan.

Nota: Anda tidak boleh mengedit gaya yang sesuai untuk panel akordion sehingga halaman telah disimpan dan Dreamweaver telah menghasilkan fail CSS dan JavaScript yang sepadan.
Untuk melihat bagaimana panel akan muncul dalam penyemak imbas web, klik ikon dunia di bahagian atas ruang kerja dan pilih penyemak imbas yang anda mahu gunakan untuk melihat halaman.

Apabila anda menggunakan komputer anda untuk melihat halaman yang mempunyai ciri interaktif yang memerlukan JavaScript atau pengaturcaraan lain, sesetengah pelayar web, termasuk Internet Explorer, akan memaparkan peringatan yang menyatakan bahawa anda mesti membenarkan kawalan ActiveX untuk melihat halaman tersebut.

Ini adalah amaran keselamatan yang muncul hanya apabila halaman dibuka pada komputer yang sama di mana halaman tersebut disimpan. Jika anda menerbitkan halaman tersebut ke pelayan web dan kemudian melihatnya melalui sambungan Internet, ralat ini tidak akan muncul untuk anda atau pelawat tapak anda.