Tab merupakan elemen UI yang boleh ditekan oleh pengguna, direka untuk kelihatan seperti cebisan label pada folder kad manila yang biasa diguna di pejabat kerajaan. Elemen ini biasanya disusun secara mendatar yang membolehkan pengguna berpindah dari satu laman web ke laman yang lain tanpa memuat semula kandungan simpanan sementara sesebuah pelayar Internet.

Artikel kali ini juga merupakan latihan terakhir untuk topik bootstrap. Bermula Januari tahun depan, kami akan tampilkan topik baharu yang amat menarik dan sesuai dengan perkembangan dunia teknologi maklumat.

Tanpa membuang masa, mari kita teruskan dengan latihan minggu ini.

LANGKAH 1: Buka mana-mana text editor yang anda miliki seperti atom, notepad atau sublime dan tuliskan kod aturcara berikut.

LANGKAH 2: Save hasil kerja anda tadi dengan nama bootstrap-tab.html ke dalam folder Genius Corner seperti latihan terdahulu.

LANGKAH 3: Klik dua kali fail tadi untuk melihat hasilnya melalui pelayar web

RAJAH 1: Hasil paparan tab menggunakan gabungan bootstrap dan jQuery.

SEMAKAN

Pada latihan tadi, kita telah mempelajari kaedah memaparkan maklumat berbentuk tab. Setiap helaian tab mengandungi maklumat berbeza apabila dipilih. Pada masa sama, kandungan di dalam tab yang lain diselindungkan daripada pandangan.

Bagi mendapatkan hasil terbaik merentas pelayar internet yang berbeza jenis, elemen tab bootstrap yang dipanggil menggunakan <ul class=nav nav-tabs> perlu digabungkan dengan elemen jQuery menggunakan $(this).tab(show).

SOALAN

SEBELUM ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan.

1. Tambah satu tab baharu ke dalam senarai tab.

2. Papar imej di dalam tab baharu tadi

3. Papar jadual di dalam tab pertama

Jika anda mempunyai sebarang pertanyaan atau cadangan, sila tinggalkan komen anda di www.farizgaskin.com dan kami akan cuba jawab sepantas mungkin. Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan.