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

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

Video: JavaScript for Web Apps, by Tomas Reimers and Mike Rizzo 2025

Video: JavaScript for Web Apps, by Tomas Reimers and Mike Rizzo 2025
Anonim

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:

  1. Letakkan kursor pada halaman yang Anda inginkan agar panel akordeon muncul.

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

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

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

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

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

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

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

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

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

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

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

Pilihan Editor

Kantor 2011 untuk Mac: Membuat Tabel dengan Kotak Dialog atau Teks - dummies

Kantor 2011 untuk Mac: Membuat Tabel dengan Kotak Dialog atau Teks - dummies

Sementara ada cara baru untuk membuat tabel di Office 2011 untuk Mac, Anda masih bisa menggunakan teknik stand-by. Menu yang familiar masih bekerja di Office 2011 untuk Mac, dan inilah buktinya. Dialog meja semuanya masih ada di sana: Di Word, pilih Table → Insert → Table; Sebagai alternatif, pada tab Tabel Ribbon, di Tabel Pilihan ...

Kantor 2011 untuk Mac: Melepaskan Command Toolbar - dummies

Kantor 2011 untuk Mac: Melepaskan Command Toolbar - dummies

Apakah Anda menggunakan Office 2011 untuk Mac atau Produk Microsoft Office lainnya, toolbar Anda bisa sangat berantakan. Setiap kali Anda merasa perlu untuk men-tweak antarmuka aplikasi Microsoft Office, Anda perlu memanggil dialog Customize Toolbars and Menus. Ini adalah dialog super kuat di Word, Excel, dan PowerPoint yang memungkinkan Anda ...

Kantor 2011 untuk Mac: Berbagi Toolbar dan Menu - dummies

Kantor 2011 untuk Mac: Berbagi Toolbar dan Menu - dummies

Setelah Anda menyesuaikan Office 2011 Anda bilah alat dan antarmuka, Anda dapat berbagi penyesuaian dengan orang lain. Namun, pastikan bahwa Anda menasihati orang-orang yang telah Anda lakukan sebelum membagikan dokumen Anda dengannya; Jika tidak, mereka mungkin akan terkejut saat mereka membuka dokumen Anda dan melihat susunan toolbar atau menu yang berbeda dari pada apa ...

Pilihan Editor

Penting Office 2007 Commands - dummies

Penting Office 2007 Commands - dummies

Anda dapat membuat program Office 2007 lebih mudah jika Anda menggunakan pintasan sederhana ini. Perintah-perintah ini, seperti mengurungkan kesalahan dan memperbesar dan memperkecil akan membantu Anda menghemat waktu. Memasuki simbol: Untuk memasukkan simbol atau karakter asing yang tidak ada pada keyboard Anda, masuk ke tab Insert dan klik Symbol ...

Menyesuaikan Perintah Menu di Office 2003 - dummies

Menyesuaikan Perintah Menu di Office 2003 - dummies

Office 2003 menyediakan dua teknik untuk menyesuaikan menu dan perintah menu. Anda bisa memulai dari kotak dialog Rearrange Commands atau menggunakan metode drag-and-drop. Teruslah membaca. Menangani perintah menu di kotak dialog Rearrange Commands Teknik tombol Options Toolbar untuk menangani tombol toolbar bagus dan keren, tapi bagaimana jika Anda ingin ...

Pilihan Editor

Bagaimana memecahkan kesalahan logis dalam analisis argumen Pertanyaan GRE - dummies

Bagaimana memecahkan kesalahan logis dalam analisis argumen Pertanyaan GRE - dummies

Ketika Anda menjawab Argument Analysis Pertanyaan di GRE, argumen mungkin tampak logis dan adil di permukaan tapi sebenarnya keliru (keliru, cacat). Alasan melingkar, penalaran sebab-akibat yang keliru, dan generalisasi sweeping adalah tiga tanda argumen lemah. Dengan melihat beberapa kesalahan logis yang lebih umum, Anda dapat mengidentifikasi kelemahan dalam argumen dan ...

Pilihan ganda, Beberapa Jawaban tentang Tes Matematika GRE - Pertanyaan Praktik - dummies

Pilihan ganda, Beberapa Jawaban tentang Tes Matematika GRE - Pertanyaan Praktik - dummies

Meskipun pertanyaan matematika biasanya hanya memiliki satu jawaban yang benar, ini tidak selalu terjadi. Akibatnya, beberapa pertanyaan pilihan ganda pada tes GRE Math akan memberi Anda daftar jawaban dan meminta Anda untuk memilih lebih dari satu. Pertanyaan praktik berikut meminta Anda untuk menemukan nilai kemungkinan yang berbeda secara berurutan dan ...

Pilihan ganda, Beberapa Jawaban tentang Tes Verbal GRE - Pertanyaan Praktik - dummies

Pilihan ganda, Beberapa Jawaban tentang Tes Verbal GRE - Pertanyaan Praktik - dummies

Pada tes GRE Verbal, beberapa pertanyaan pilihan ganda akan memiliki lebih dari satu jawaban yang benar. Untuk pertanyaan ini, Anda akan diminta untuk melihat-lihat pilihan jawaban dan memilih semua yang menurut Anda benar. Dalam pertanyaan praktik berikut, Anda diminta untuk membaca bagian yang disertakan, dan kemudian ...