Rumah Media Sosial Cara Membuat Panel Lipat dengan jQuery di Dreamweaver - dummies

Cara Membuat Panel Lipat dengan jQuery di Dreamweaver - dummies

Video: Python Web Apps with Flask by Ezra Zigmond 2025

Video: Python Web Apps with Flask by Ezra Zigmond 2025
Anonim

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:

  1. Letakkan kursor anda pada halaman yang anda mahu panel akordion muncul.

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

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

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

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

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

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

  8. 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).

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

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

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

Cara Membuat Panel Lipat dengan jQuery di Dreamweaver - dummies

Pilihan Editor

Bagaimana Menghubungkan Item Menu ke Kategori di Joomla - dummies

Bagaimana Menghubungkan Item Menu ke Kategori di Joomla - dummies

Untuk artikel yang dikategorikan dalam Joomla untuk dilihat oleh pengguna laman web anda, anda perlu memautkan item menu Joomla anda ke kategori Joomla yang mengandungi artikel yang ingin anda siarkan. Dengan menyambungkan kategori ke item menu, semua artikel dalam kategori boleh didapati melalui item menu yang berkaitan. Untuk membuat ...

Cara Memasang Joomla CMS pada Server Jauh - dummies

Cara Memasang Joomla CMS pada Server Jauh - dummies

Sebaik sahaja anda telah memuatkan fail Joomla yang tidak diturunkan di pelayan jauh dan sediakan MySQL untuk Joomla, anda sudah bersedia untuk memasang Sistem Pengurusan Kandungan Joomla (CMS). Navigasi ke tapak anda di pelayan tuan rumah. Anda melihat halaman pemasangan Joomla pertama. Pilih bahasa. Klik Seterusnya. Semua item dalam pane bahagian atas ...

Cara Membiarkan Pengguna Menguruskan Akaun Sendiri di Joomla - dummies

Cara Membiarkan Pengguna Menguruskan Akaun Sendiri di Joomla - dummies

Walaupun anda boleh mengurus pengguna dari hujung belakang, Joomla menyediakan kemudahan yang baik yang membolehkan pengguna menguruskan diri mereka juga. Anda boleh membuat halaman di mana pengguna boleh mendaftar, log masuk, menetapkan semula kata laluan mereka, diingatkan kata laluan mereka, dan sebagainya. Buat laman pengurusan pengguna Untuk membuat halaman yang membolehkan pengguna mengurus sendiri, anda ...

Pilihan Editor

Pengguna dan Definisi SharePoint berbeza - dummies

Pengguna dan Definisi SharePoint berbeza - dummies

SharePoint mempunyai banyak jenis pengguna yang berbeza, dan bergantung di mana peranan anda sesuai , anda mungkin mempunyai pengalaman yang sangat berbeza dari pengguna SharePoint yang lain. Sebagai contoh, anda mungkin ditugaskan untuk membuat dan mentadbir laman web SharePoint untuk pasukan anda. Dalam kes ini, anda mungkin melihat ke hadapan fungsi yang luas SharePoint ...

Dan Microblog dalam SharePoint - dummies

Dan Microblog dalam SharePoint - dummies

Microblogging dibuat terkenal oleh Twitter. SharePoint 2013 membawa mikroblogging ke dunia korporat. Menggunakan Twitter, anda menghantar mesej ringkas kepada dunia. Anda boleh mengikuti orang lain dan menarik pengikut anda sendiri. Anda menyebut orang lain menggunakan simbol @ yang diikuti dengan nama mereka dan boleh menanda topik menggunakan # ...

Mengeksport Table Akses ke Senarai Dalam Talian SharePoint - dummies

Mengeksport Table Akses ke Senarai Dalam Talian SharePoint - dummies

Jika anda mempunyai meja dalam Akses yang ada pangkalan data yang anda ingin sediakan untuk ahli pasukan anda yang tidak mempunyai aplikasi MS Access 2010, cara terbaik untuk melakukan ini adalah untuk mengeksport jadual tersebut ke dalam senarai SharePoint. Ikuti langkah-langkah berikut: Dari pangkalan data anda, klik kanan pada jadual di ...

Pilihan Editor

Penyediaan aSVAB: Akar - patung

Penyediaan aSVAB: Akar - patung

Menjadi akrab dengan akar untuk ASVAB. Akar adalah kebalikan dari kuasa atau eksponen. Terdapat pelbagai jenis akar tak terhingga. Anda mempunyai akar kuadrat, yang bermaksud "membuang" asas kepada kuasa kedua; akar kubus, yang bermaksud "membuang" asas yang dinaikkan kepada kuasa ketiga; akar yang keempat, untuk ...

ASVAB Penyediaan: Bekerja dengan Perpuluhan - patung

ASVAB Penyediaan: Bekerja dengan Perpuluhan - patung

Anda perlu tahu bagaimana untuk bekerja dengan perpuluhan untuk ASBAB . Perpuluhan adalah kaedah menulis nombor pecahan tanpa menggunakan pengangka dan penyebut. Anda boleh menulis pecahan 7/10 sebagai perpuluhan 0. 7; anda menyebutnya "tujuh persepuluh" atau "titik nol tujuh. "Tempoh atau titik perpuluhan menunjukkan bahawa nombor itu ...

ASVAB Subtest Details - dummies

ASVAB Subtest Details - dummies

Tergantung di mana dan untuk tujuan apa yang anda ambil ujian, anda mungkin menghadapi beberapa versi ASVAB. Versi terkomputer dari ASVAB (CAT-ASVAB) mengandungi sembilan subtest masa yang berasingan. Pada CAT-ASVAB, Maklumat Auto dan Maklumat Kedai dipisahkan kepada dua ujian berbeza, sedangkan mereka digabungkan pada versi kertas. Lihatlah ...