Cara Membuat Panel Tapak dengan jQuery di Dreamweaver - dummies

Pilihan Tab UI jQuery dalam Dreamweaver menjadikannya mudah untuk menambah satu siri panel yang memaparkan atau menyembunyikan kandungan yang sepadan dengan satu siri tab. Sama dengan panel yang dilipat, ciri jQuery UI ini membolehkan anda memaparkan lebih banyak maklumat dalam ruang kurang dalam tetingkap penyemak imbas.

Sama seperti panel akordion, panel tab boleh digunakan untuk memaparkan teks, imej, dan multimedia.

Apabila anda membuat panel tab dengan widget jQuery UI dalam Dreamweaver, anda boleh menentukan susunan tab, dengan berkesan mengawal kandungan yang muncul apabila halaman dimuatkan terlebih dahulu.

Ikuti langkah-langkah ini untuk membuat kumpulan panel tab:

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

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

   Panel tab dimasukkan ke dalam halaman dan fail CSS yang sepadan muncul dalam panel Sumber Designer CSS.

   

3. Di ruang kerja utama, pilih teks Tab1, Tab2, dan Tab 3 seterusnya, kemudian gantikan setiap tajuk tab dengan teks yang anda mahu muncul di panel panel kawasan.

   Anda boleh mengedit kandungan tab hanya di ruang kerja, bukan dalam pemeriksa Harta. Secara lalai, teks dalam kawasan Tab adalah tebal dan hitam, tetapi anda boleh mengubah pemformatan tersebut dengan mengubah peraturan CSS yang sepadan.

4. Untuk menyesuaikan saiz setiap tab, pilih tab dan kemudian gunakan tetapan Ketinggian dan Lebar di pemeriksa Hartanah.

   Dengan tab individu dipilih, inspektor Harta memaparkan tetapan untuk tab itu secara khusus.

   

5. Untuk menambah kandungan, pilih perkataan Content di kawasan utama mana-mana panel tab dipilih dan kemudian masukkan teks, imej atau multimedia.

   Anda boleh menyalin teks ke dalam panel dengan menyisipkannya sama seperti anda menyekat teks di mana-mana sahaja di halaman. Begitu juga, masukkan imej ke dalam panel seperti mana anda berada di halaman lain: Pilih Insert → Imej → Imej dan kemudian pilih fail GIF, JPEG, atau PNG yang anda mahu paparkan. Anda juga boleh menambah fail multimedia atau Photoshop jika anda mahu menggunakan Dreamweaver untuk mengoptimumkan imej anda.

6. Untuk menukar penampilan tab atau panel, seperti wajah atau warna font, edit peraturan CSS yang sepadan.

   Sebagai contoh, untuk mengedit warna teks atau font dalam tab, pilih kotak di sekeliling tab dan kotak sekitar gaya dipilih secara automatik dalam panel Pemilih CSS Designer.

7. Untuk mengedit nombor atau perintah panel tab, klik tab JQuery Tab biru di bahagian atas panel yang ditetapkan di kawasan reka bentuk.

   Apabila anda mengklik tab biru, tetapan panel muncul di inspektur Harta. Klik di luar kawasan berkotak biru, dan Pemeriksa Hartanah kembali ke tetapan lalainya.

   

8. Untuk menambah tab, klik ikon tambah tanda (+) di pemeriksa Hartanah.

   Tab baru muncul di ruang kerja.

9. Untuk menukar susunan tab, pilih nama tab di pemeriksa Harta dan kemudian gunakan anak panah di medan Panel untuk memindahkan panel.

   Nama Panel bergerak ke atas dan ke bawah menu apabila pesanan ditukar. Panel dan tab yang sepadannya muncul di halaman web dalam susunan di mana ia muncul di pemeriksa Harta.

10. Pilih panel dalam senarai juntai Panel yang anda mahu paparkan apabila halaman dimuatkan ke dalam pelayar web.

    Senarai juntai sepadan dengan nama yang anda beri setiap tab di ruang kerja.

11. Pilih Fail → Simpan untuk menyimpan halaman; apabila kotak dialog Copy Dependent Files muncul, klik OK untuk menjana secara automatik semua fail yang berkaitan.

    Untuk ciri jQuery UI untuk berfungsi, anda mesti memuat naik fail ini ke pelayan web anda apabila anda memuat naik halaman web.

12. Klik ikon dunia di bahagian atas ruang kerja dan pilih penyemak imbas untuk mempratonton kerja anda dalam penyemak imbas.

    Bergantung kepada penyemak imbas web anda, anda mungkin perlu membenarkan kawalan ActiveX untuk melihat halaman pada komputer anda.