Bagaimana Membangun Antarmuka Tab di AJAX untuk Pemrograman HTML5 dan CSS3 - dummies

Teknik penting dalam pengembangan web HTML5 dan CSS3 adalah penggunaan antarmuka tab di AJAX. Hal ini memungkinkan pengguna untuk mengubah isi suatu segmen dengan memilih salah satu rangkaian tab.

Pada antarmuka tab, hanya satu elemen yang terlihat sekaligus, namun semua tab terlihat. Antarmuka tab sedikit lebih mudah diprediksi daripada akordeon karena tab (tidak seperti judul akordeon) tetap berada di tempat yang sama.

Tabs berubah warna untuk menunjukkan tab mana yang saat ini disorot, dan juga mengubah keadaan (biasanya dengan mengubah warna) untuk menunjukkan bahwa mereka sedang melayang di atas. Saat Anda mengklik tab lain, area konten utama widget diganti dengan konten yang sesuai.

Inilah yang terjadi saat pengguna mengklik tab.

Seperti akordeon, efek tab sangat mudah dicapai. Lihatlah kode:

$ (init); fungsi init () {$ ("# tab"). tab ();} tab. html

Demo Tab

Buku 1
Buku 2
Buku 3


Buku I - Membuat Pondasi HTML







Pondasi HTML Sound
Ini Semua Tentang Validasi
Memilih Alat Anda
Mengelola Informasi dengan Daftar dan Tabel
Membuat Koneksi dengan Links
Menambahkan Gambar
Membuat bentuk


Buku II - Styling with CSS

Mewarnai Dunia Anda
Styling Text
Pemilih, Kelas, dan Gaya
Batas dan Latar Belakang
Tingkat CSS


Buku III - Menggunakan Posisi CSS untuk Layout

Fun with the Fabulous Float
Membangun Tata Letak Halaman Terapung
Daftar dan Menu Styling
Menggunakan Pemosisian Alternatif

Mekanisme untuk membangun antarmuka berbasis tab sangat mirip dengan yang dimiliki oleh akordeon:

1. Tambahkan semua file yang sesuai.

   Seperti kebanyakan efek jQuery UI, Anda memerlukan jQuery, jQuery UI, dan file CSS tema. Anda juga memerlukan akses ke direktori gambar untuk grafis latar belakang tema.

2. Bangun HTML seperti biasa.

   Jika Anda membangun halaman web yang terorganisasi dengan baik, Anda sudah cukup dekat.

3. Buat div yang berisi semua data tab.

   Ini adalah elemen yang akan Anda lakukan pada sihir jQuery.

4. Tempatkan area konten utama dengan divs bernama.

   Setiap bagian konten yang akan ditampilkan sebagai halaman harus ditempatkan di div dengan ID deskriptif. Masing-masing divs ini harus ditempatkan di div tab.

5. Tambahkan daftar tautan lokal ke konten.

   Buat menu link. Tempatkan ini di bagian atas div tab. Setiap link harus menjadi link lokal ke salah satu divs. Misalnya, indeks terlihat seperti ini:

   
   Buku 1
   Buku 2
   Buku 3
   
   

6. Buatlah fungsi init () seperti biasa.

   Gunakan teknik jQuery yang biasa.

7. Panggil tab () metode pada div utama.

   Luar biasa, satu baris kode jQuery melakukan semua pekerjaan.