Membina Widget Tab yang Responsif dengan GridTab

Ia sentiasa lebih mudah untuk membina laman web menggunakan alat sumber terbuka bukannya mencipta semula roda. Alat ini berkisar dari perpustakaan ke plugin yang lebih kecil tetapi anda boleh mencari penyelesaian pada dasarnya apa-apa.

Yang luar biasa jQuery GridTab plugin adalah satu contoh yang baik. Ia membolehkan anda untuk sediakan grid tersuai, mentakrifkan titik putus, dan buat widget tab responsif yang sesuai dengan mana-mana laman web.

Anda boleh menambah kelas CSS anda sendiri atau bekerjasama dengan yang ada untuk membuat ciri tab yang sesuai dengan reka bentuk anda. Plugin ini juga menyokong unsur navigasi untuk kawalan seterusnya / prev dan beralih antara tab.

Pemasangan adalah angin dan ia hanya memerlukan perpustakaan jQuery sebagai pergantungan. Setelah itu dipasang, anda boleh merebut GridTab dari npm atau muat turun terus dari GitHub.

Perlu diingat plugin widget tab ini mempunyai gaya lalai, jadi ia mempunyai CSS stylesheet berasingan di atas fail plugin JS. Tetapi, anda sentiasa boleh menggabungkan CSS ini ke dalam anda sendiri untuk mengurangkan permintaan HTTP.

Untuk memulakan plugin, anda hanya lulus saiz grid keseluruhan bersama dengan sebarang parameter pilihan (semua disenaraikan di GitHub).

Berikut adalah cara yang mudah skrip permulaan:

 $ (document) .ready (function () $ ('# gridtab-1'). gridtab (grid: 3);); 

Tetapan termasuk pemilih tersuai, gaya responsif, tetapan sempadan / padding / warna, dan tentu saja, a fungsi panggil balik.

Anda mungkin ingin tahu bagaimana semua ini berfungsi dan apa yang kelihatan seperti di dalam penyemak imbas anda. Semak “Demo” seksyen untuk melihat a beberapa contoh, termasuk kod sumber mentah anda boleh menyalin.

Kebanyakan orang memikirkan tab sebagai ciri untuk widget profil kecil. Walau bagaimanapun, laman web portfolio juga boleh menggunakan grid dengan ciri tab dan plugin GridTab adalah sumber terbaik untuk memaku kesan ini.

Semua yang anda perlu ketahui, termasuk dokumentasi penuh, boleh didapati di halaman utama GridTab. Ini juga termasuk pautan ke repo GitHub supaya anda boleh menyemak imbas sumber dan mula menyesuaikan grid tab responsif sendiri.