Cara membuat panel tab dengan jQuery di Dreamweaver - dummies

Opsi jQuery UI Tab di Dreamweaver memudahkan menambahkan serangkaian panel yang menampilkan atau menyembunyikan konten yang sesuai dengan serangkaian tab. Mirip dengan panel yang dapat dilipat, fitur jQuery UI ini memungkinkan Anda menampilkan lebih banyak informasi dalam ruang yang lebih sedikit di dalam jendela browser.

Serupa dengan panel akordeon, panel tab dapat digunakan untuk menampilkan teks, gambar, dan multimedia.

Bila Anda membuat panel tab dengan widget jQuery UI di Dreamweaver, Anda dapat menentukan urutan tab, yang secara efektif mengendalikan konten apa yang muncul saat halaman pertama kali dimuat.

Ikuti langkah-langkah ini untuk membuat grup panel tab:

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

2. Pilih Insert → jQuery UI → Tabs, atau klik item Tab di panel Insert jQuery UI.

   Panel tab dimasukkan ke halaman dan file CSS yang sesuai muncul di panel CSS Designer Source.

   

3. Di ruang kerja utama, pilih teks Tab1, Tab2, dan Tab 3 , kemudian ganti setiap judul tab dengan teks yang ingin Anda tampilkan di tab panel. daerah.

   Anda dapat mengedit isi tab hanya di ruang kerja, bukan di Property inspector. Secara default, teks di area Tab tebal dan hitam, namun Anda dapat mengubah format itu dengan mengubah aturan CSS yang sesuai.

4. Untuk menyesuaikan ukuran setiap tab, pilih tab dan kemudian gunakan pengaturan Height and Width di Property inspector.

   Dengan tab individual yang dipilih, Property inspector menampilkan pengaturan untuk tab itu secara khusus.

   

5. Untuk menambahkan konten, pilih kata Konten di area utama panel tab yang dipilih lalu masukkan teks, gambar, atau multimedia.

   Anda dapat menyalin teks ke panel dengan menempelkannya sama seperti Anda menempelkan teks di tempat lain pada halaman. Demikian pula, masukkan gambar ke panel seperti yang Anda inginkan di halaman lain: Pilih Insert → Image → Image dan pilih file GIF, JPEG, atau PNG yang ingin Anda tampilkan. Anda juga bisa menambahkan file multimedia atau Photoshop jika ingin menggunakan Dreamweaver untuk mengoptimalkan gambar Anda.

6. Untuk mengubah tampilan tab atau panel, seperti wajah atau warna font, edit aturan CSS yang sesuai.

   Misalnya, untuk mengedit warna teks atau font di tab, pilih kotak di sekitar tab dan kotak di sekitar style secara otomatis dipilih di panel CSS Designer Selector.

7. Untuk mengedit nomor atau urutan panel tab, klik tab Tab jQuery biru di bagian atas panel yang berada di area desain.

   Bila Anda mengklik tab biru, pengaturan panel akan muncul di Property inspector. Klik di luar area kotak biru, dan Property inspector kembali ke pengaturan defaultnya.

   

8. Untuk menambahkan tab, klik tanda tambah (+) pada inspektur properti.

   Tab baru muncul di ruang kerja.

9. Untuk mengubah urutan tab, pilih nama tab di inspektur Properti dan kemudian gunakan panah di bidang Panel untuk memindahkan panel.

   Nama panel bergerak ke atas dan ke bawah menu saat pesanan diubah. Panel dan tab yang sesuai muncul di halaman web sesuai urutan tampilan di Property inspector.

10. Pilih panel di daftar turun Panels yang ingin Anda tampilkan saat halaman dimuatkan ke browser web.

    Daftar drop-down sesuai dengan nama yang Anda berikan pada setiap tab di ruang kerja.

11. Pilih File → Save untuk menyimpan halaman; ketika kotak dialog Copy Dependent Files muncul, klik OK untuk secara otomatis membuat semua file terkait.

    Agar fitur jQuery UI berfungsi, Anda harus mengupload file-file ini ke server web Anda saat Anda mengupload halaman web.

12. Klik ikon dunia di bagian atas ruang kerja dan pilih browser untuk melihat pratinjau pekerjaan Anda di browser.

    Bergantung pada browser web Anda, Anda mungkin harus membiarkan kontrol ActiveX untuk melihat pratinjau halaman di komputer Anda.