Bootstrap est l'un des cadres frontaux les plus populaires. À l'aide de bootstrap dans votre projet, vous pouvez rapidement implémenter des pages Web réactives.
Si vous essayez d'utiliser la maçonnerie et le composant Tab de l'un des nombreux composants JavaScript fournis par Bootstrap, vous trouverez beaucoup de comportement ennuyeux.
J'ai rencontré cet article, et cet article se concentre sur ce qui est ce problème et sur la façon dont vous voulez le résoudre.
Onglets de bootstrap
Le composant Tab de Bootstrap comprend deux points de clé: l'élément de navigation à onglet et certains panneaux de contenu. Lorsque la page se charge, le premier panneau applique la classe .active. Rendre ce panneau visible par défaut. Cette classe change la visibilité du panneau à l'aide de JavaScript et déclenche les événements via la navigation à l'onglet: si ce panneau a maintenant la classe .active, alors il est visible, sinon le panneau est masqué.
Si vous avez un contenu Web qui est meilleur dans des blocs séparés plutôt que bondés au même endroit, ce type de composant d'onglet peut être utile.
Pourquoi Maronry?
Dans certains cas, le contenu de chaque panneau convient pour être affiché dans une disposition de grille réactive. Par exemple, une gamme de biens, de services et d'éléments de dossier est tous des types de contenu qui peuvent être affichés dans un format de grille.
Cependant, si les grilles de la grille ne sont pas à la même hauteur, alors quelque chose comme vous pouvez voir ci-dessous se produira.
Les deux lignes sont étirées par un grand espacement, ce qui rend la mise en page laide.
C'est le moment pour la maçonnerie de résoudre le problème. Ajoutez des fonctions de maçonnerie à cette disposition désordonnée, puis votre disposition s'adaptera dynamiquement à la zone réelle de l'écran, éliminant l'espacement vide de toutes les dispositions endommagées.
Page de démonstration de configuration
Faire un exemple de page pour montrer comment intégrer les onglets de bootstrap et la maçonnerie n'est pas aussi simple que prévu.
Le cas de démonstration de cet article est basé sur le modèle de départ disponible sur le site Bootstrap
Chaque projet de grille dans le panneau d'onglet est construit à l'aide du système de grille de bootstrap et des composants miniatures. Voici un extrait de code pour expliquer sa structure:
<div> <div> <img src = "http://lolompixel.com/200/200/abstract"> <div> <h3> Label Thumbnail </h3> <p> ... </p> <p> <a href = "#" "role =" Button "> Button </a> <a href =" # " role = "Button"> Button </a> </p> </div> </div> <! - Répétez deux fois de plus ... ->
Le code ci-dessus crée une grille avec trois colonnes sur un grand écran et deux colonnes sur un petit écran. Si vous devez revoir le système de grille de bootstrap, la compréhension de Syed Fazle Rahman du système de grille de bootstrap est un bon article.
Les composants d'onglet dans l'exemple de page ont la structure HTML suivante:
<div role = "tabpanel"> <! - onglets de navigation -> <ul role = "tablist"> <li role = "présentation"> <a href = "# panneau" aria-controls = "Panel-1" role = "tab" data-toggle = "tab"> Panel 1 </a> </li> <li role = "présentation"> <a href = "# pannel" aria-------------CONTROLS = "Panelation"> <a href = "# pannel" aria-------------CONTROLS = "Panelation"> <a href = "# Panel-2" Aria-Cons role = "tab" data-toggle = "tab"> panneau 2 </a> </li> <li role = "présentation"> <a href = "# Panel-3" aria-Controls = "Panel-3" role = "tab" data-toggle = "tab"> Panel 3 </a> </li> <li role = "présentation"> <a href = "# pannel-4" aRIA-CONTROLS = "Panel-4" role = "tab" data-toggle = "tab"> Panneau 4 </a> </li> </ul> <! - Panneaux d'onglet -> <div> <div role = "tabpanel" id = "Pannel-1"> <div> <div> <! - Thumbnail va ici -> </ div> <v> <! - Thumbnail va ici -> </ div> <v> <! -> </ div> <div> <! - La vignette va ici -> </ div> ... </ div> <! - End Masonry-Container -> </div> <! - End Panel-1 -> <div role = "tabpanel" id = "Panel-2"> <! - Identique à ce qui se passe à l'intérieur de Panel-1 -> </ Div> <! - Fin du panneau-2 -> </ / Div> <! Tabpanel ->
Voici quelques notes sur l'extrait de code ci-dessus:
Les commentaires HTML soulignent les composants clés de l'onglet: les onglets de navigation marquent la section de navigation de l'onglet et les panneaux de navigation marquent le panneau de contenu.
Les liens vers les onglets sont connectés au panneau de contenu avec la même valeur de l'attribut ID correspondant via leur attribut HREF. Par exemple, un lien avec HREF = "# Panel-1" ouvre un panneau de contenu avec id = Panel-1.
Chaque balise d'ancrage dans la section de navigation contient data-toggle = "tab". Cette balise permet au composant TAB de fonctionner sans écrire de JavaScript supplémentaire.
L'élément cible de la maçonnerie doit avoir la classe .Masonry-container, qui convient aux éléments de div wrapper contenant tous les éléments de la grille, et doit également être appliqué à la classe .Item pour chaque élément de grille unique.
Pour voir la pleine puissance de la bibliothèque de maçonnerie, assurez-vous de vous assurer que les éléments de la grille ont des hauteurs différentes. Par exemple, supprimer une image d'un projet, raccourcir les paragraphes d'un autre projet, etc.
Pour le code complet, veuillez vérifier le code pour l'exemple dans Codepen.
Ajout de la bibliothèque de maçonnerie
Vous pouvez télécharger Masonry.pkgd.min.js en cliquant sur le bouton "Télécharger" sur le site officiel de la maçonnerie.
Pour éviter les problèmes de mise en page, l'auteur de la bibliothèque recommande d'utiliser la maçonnerie avec le plugin à charge d'images.
La maçonnerie n'a pas besoin de jQuery. Mais parce que le composant JavaScript de Bootstrap utilise déjà jQuery, initialisant la maçonnerie à jQuery, je vais améliorer ma vie.
Il s'agit de l'extrait de code dont nous avons besoin pour initialiser la maçonnerie avec jQuery et images.
var $ conteneur = $ ('. Masonry-Container'); $ contener.imageslowed (function () {$ contener.masonry ({Columnwidth: '.Item', itemSelector: '.item'});});Le code ci-dessus stocke la div qui enveloppe tous les éléments de la grille dans une variable appelée $ conteneur.
Ensuite, la maçonnerie l'initialise avec deux options recommandées sur $ conteneur. L'option de colonne indique la largeur d'une colonne d'une grille horizontale. Ici, la largeur d'un seul élément de grille est définie en utilisant le nom de classe d'un seul élément de grille. L'option ItemSelector indique quel élément enfant est utilisé comme élément de projet. Ici, il est également défini comme un seul élément de grille.
Il est maintenant temps de tester le code.
Oups! Quel est le problème avec le panneau caché?
Sur une page Web qui n'utilise pas l'onglet bootstrap, le code ci-dessus est comme la magie. Cependant, dans ce cas, vous trouverez bientôt un comportement intéressant à apparaître.
Tout d'abord, il a l'air bien car la grille à l'intérieur du panneau d'onglet affiché par défaut s'affiche correctement:
Cependant, si vous cliquez sur le lien de navigation d'onglet pour afficher le contenu du panneau caché, ce qui suit se produira:
En regardant le code source, la maçonnerie a déclenché comme prévu, mais la position de chaque élément n'est pas calculée correctement: les articles de la grille sont empilés comme un jeu de cartes.
Ce n'est pas tout. Le redimensionnement de la fenêtre du navigateur permettra à ces éléments de grille de se positionner correctement.
Résolvons cette erreur de mise en page
Étant donné que cette erreur de mise en page inattendue devient plus évidente après avoir cliqué sur le lien de navigation de l'onglet, regardons de plus près les événements déclenchés par l'onglet bootstrap.
La liste des événements est très courte. comme suit.
show.bs.tab déclenche la page d'onglet à afficher, mais avant que la nouvelle page d'onglet ne s'affiche
affiché
hide.bs.tab déclenche lorsque la page de la nouvelle onglet sera affichée (de sorte que la page d'onglet affichée précédente sera masquée)
Hidden.bs.tab est tiré après une nouvelle page d'onglet affichée (donc la page d'onglet affichée précédente est masquée)
Étant donné que la disposition de la grille est gâchée une fois la page d'onglet affichée, nous allons à l'événement show.bs.tab. Nous plaçons le code ici sous notre code d'origine:
$ ('a [data-toggle = tab]'). Chaque (fonction () {var $ this = $ (this); $ this.on ('wowl.bs.tab', function () {$ contener.imageslosed (function () {$ contener.masonry ({columnwidth: '.item', itelsselectCe qui se passe dans le code ci-dessus:
La fonction jQuery .Each () fait des boucles via chaque lien de navigation et écoute pour l'événement affiché.bs.tab. Lorsque cet événement est déclenché, le panneau correspondant devient visible et la maçonnerie réinitialise toutes les images après le chargement.
Testons le code
Si vous continuez à suivre l'article, démarrez votre exemple de page directement dans votre navigateur ou essayez l'exemple de codepen ci-dessous pour voir les résultats.
Vous pouvez également jeter un œil à l'exemple complet pour tester l'effet de mise en page réactif.
Cliquez sur le lien de navigation Tab et faites attention à la façon dont les articles de la grille se situent uniformément dans chaque panneau pour le moment. La modification de la taille du navigateur entraînera le repositionnement correctement du projet de grille et aura un bel effet d'animation.
Voilà, la tâche est terminée!
en conclusion
Dans cet article, j'ai montré comment intégrer les onglets de bootstrap et les bibliothèques JavaScript de maçonnerie.
Les deux scripts sont faciles à utiliser et très puissants. Cependant, en les assemblant tous les deux, vous facerez à certaines vulnérabilités de mise en page qui affectent les onglets cachés. Comme indiqué ci-dessus, l'astuce consiste à réinitialiser la bibliothèque de maçonnerie une fois que chaque panneau est devenu visible.