Cara Membina Antara Muka Tab di AJAX untuk Pemrograman HTML5 dan CSS3 - dummies

Teknik penting dalam pembangunan web HTML5 dan CSS3 ialah penggunaan antara muka tab di AJAX. Ini membolehkan pengguna untuk menukar kandungan segmen dengan memilih satu daripada satu siri tab.

Dalam antara muka tab, hanya satu elemen yang dapat dilihat pada satu-satu masa, tetapi tab semua dapat dilihat. Antara muka tab adalah sedikit lebih diramalkan daripada akordion kerana tab (tidak seperti tajuk akordion) berada di tempat yang sama.

Tab menukar warna untuk menunjukkan tab mana yang sedang diserlahkan, dan mereka juga menukar keadaan (biasanya dengan menukar warna) untuk menunjukkan bahawa mereka sedang dihidupkan. Apabila anda mengklik tab lain, kawasan kandungan utama widget digantikan dengan kandungan yang sama.

Inilah yang berlaku apabila pengguna mengklik tab.

Seperti akordion, kesan tab adalah sangat mudah untuk dicapai. Lihat kod:

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

Demo Tab

Buku 1
Buku 2
Buku 3


Buku I - Mewujudkan Yayasan HTML







Yayasan HTML Bunyi
Semua Tentang Pengesahan
Memilih Alat Anda
Menguruskan Maklumat dengan Senarai dan Jadual
Membuat Sambungan dengan Pautan
Menambah Imej
Mencipta bentuk


Buku II - Styling dengan CSS

Mewarna Dunia Anda
Teks Styling
Selectors, Class, and Style
Sempadan dan Latar Belakang
CSS for Layout


Fun with the Float Fabulous

Layout Page Floating Building
Lists and Menu Styling
Using Positioning alternative
Mekanisme untuk membangunkan interface berbasis tab sangat mirip dengan accordions:

Tambah semua fail yang sesuai.

1. Seperti kebanyakan kesan UI jQuery, anda memerlukan jQuery, jQuery UI, dan fail CSS tema. Anda juga memerlukan akses kepada direktori imej untuk grafik latar belakang tema.

   Membina HTML seperti biasa.

2. Jika anda membina halaman web yang teratur, anda sudah cukup rapat.

   Membina div yang mengandungi semua data tab.

3. Ini adalah elemen yang akan anda lakukan pada sihir jQuery.

   Tempatkan kandungan kandungan utama dalam nama div.

4. Setiap bahagian kandungan yang akan dipaparkan sebagai halaman harus diletakkan di dalam div dengan ID deskriptif. Setiap div ini sepatutnya diletakkan dalam tab div.

   Tambah senarai pautan setempat kepada kandungan.

5. Membina menu pautan. Letakkan ini di bahagian atas div tab. Setiap pautan harus menjadi pautan setempat kepada salah satu divs. Sebagai contoh, indeks kelihatan seperti ini:

   Buku 1

   
   Buku 2
   Buku 3
   Bina fungsi init () seperti biasa.
   
   

6. Gunakan teknik jQuery biasa.

   Panggil kaedah tab () pada div utama.

7. Sangat, satu baris kod jQuery melakukan semua kerja.