Construire des widgets à onglets réactifs avec GridTab

Il est toujours plus facile de créer des sites Web en utilisant outils open source plutôt que de réinventer la roue. Ces outils vont des bibliothèques aux plus petits plugins, mais vous pouvez trouver une solution pour pratiquement tout.

Le phénoménal plugin jQuery GridTab est un bel exemple. Cela vous permet de mettre en place une grille personnalisée, définir les points d'arrêt, et créer un widget à onglets réactif qui convient à n'importe quel site web.

Vous pouvez ajouter vos propres classes CSS ou utiliser des classes existantes pour créer une fonction de tabulation adaptée à votre conception. Ce plugin supporte aussi éléments de navigation pour les contrôles next / prev et basculer entre les onglets.

L’installation est simple et ne nécessite que la bibliothèque jQuery en tant que dépendance. Une fois installé, vous pouvez récupérer GridTab sur npm ou le télécharger directement à partir de GitHub..

Gardez à l'esprit que ce plugin de widget à onglets a une Style par défaut, donc il a un feuille de style CSS séparée sur le fichier de plugin JS. Mais, vous pouvez toujours fusionner ce CSS dans le vôtre pour réduire les requêtes HTTP.

Pour initialiser le plugin, vous passez simplement le taille totale de la grille de même que tout paramètre optionnel (tous listés sur GitHub).

Voici un simple script d'initialisation:

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

Les paramètres incluent sélecteurs personnalisés, styles réactifs, paramètres de bordure / remplissage / couleur, et bien sûr, un fonction de rappel.

Vous pourriez être curieux de voir comment tout cela fonctionne et à quoi cela ressemble dans votre navigateur. Vérifiez “Démos” section pour voir un quelques exemples, comprenant code source brut vous pouvez copier.

La plupart des gens considèrent les onglets comme des fonctionnalités destinées aux petits widgets de profil. toutefois, sites de portefeuille peut également faire usage de grilles à onglets et le plugin GridTab est la meilleure ressource pour clouer cet effet.

Tout ce que vous devez savoir, y compris documentation complète, peut être trouvé sur la page principale de GridTab. Cela inclut également un lien vers le référentiel GitHub afin que vous puissiez parcourir la source et commencer à personnaliser vos propres grilles à onglets réactives..