Bangun Widget Tab yang Responsif dengan GridTab

Selalu lebih mudah untuk membangun situs web menggunakan alat sumber terbuka alih-alih menciptakan kembali roda. Alat-alat ini berkisar dari pustaka ke plugin yang lebih kecil tetapi Anda dapat menemukan solusi untuk apa pun pada dasarnya.

Yang fenomenal Plugin jQuery GridTab adalah salah satu contoh yang bagus. Itu memungkinkan Anda untuk mengatur kisi khusus, tentukan breakpoints, dan buat widget tab responsif yang sesuai dengan situs web mana pun.

Anda dapat menambahkan kelas CSS Anda sendiri atau bekerja dengan yang sudah ada untuk membuat fitur tab yang sesuai dengan desain Anda. Plugin ini juga mendukung elemen navigasi untuk kontrol berikutnya / sebelumnya dan beralih antar tab.

Instalasi sangat mudah dan hanya membutuhkan pustaka jQuery sebagai ketergantungan. Setelah terinstal, Anda dapat mengambil GridTab dari npm atau mengunduhnya langsung dari GitHub.

Perlu diingat bahwa plugin widget ini memiliki tab gaya default, jadi itu memang memiliki pisahkan stylesheet CSS di atas file plugin JS. Namun, Anda selalu dapat menggabungkan CSS ini ke dalam milik Anda untuk mengurangi permintaan HTTP.

Untuk menginisialisasi plugin, Anda cukup meneruskan ukuran total grid bersama parameter opsional (semua tercantum di GitHub).

Ini sederhana skrip inisialisasi:

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

Pengaturan termasuk penyeleksi khusus, gaya responsif, pengaturan perbatasan / bantalan / warna, dan tentu saja, a fungsi panggilan balik.

Anda mungkin penasaran untuk melihat bagaimana semua ini bekerja dan seperti apa di browser Anda. Lihat “Demo” bagian untuk melihat a beberapa contoh, termasuk kode sumber mentah Anda bisa menyalin.

Kebanyakan orang menganggap tab sebagai fitur untuk widget profil kecil. Namun, situs web portofolio juga dapat memanfaatkan kisi dengan fitur tab dan plugin GridTab adalah sumber daya terbaik untuk memakukan efek ini.

Semua yang perlu Anda ketahui, termasuk dokumentasi lengkap, dapat ditemukan di halaman GridTab utama. Ini juga termasuk tautan ke repo GitHub sehingga Anda dapat menelusuri sumbernya dan mulai menyesuaikan sendiri kisi-kisi tab yang responsif..