Accentsconagua

Comment ajouter une liaison profonde au composant Bootstrap 4 Tabs

Création de sites web
Share

Aujourd'hui, nous allons apprendre à ajouter des «liens profonds» aux onglets de Bootstrap 4. Pour mieux comprendre nos objectifs, consultez la page de démonstration et faites attention à deux choses:

  1. Comment l'URL change lorsque vous cliquez sur les onglets.
  2. En attribuant à chaque onglet sa propre URL, le contenu devient partageable. Si vous saisissez l'URL d'un onglet et l'ouvrez dans un autre navigateur / une autre fenêtre, l'onglet correspondant sera visible..


Notez que l'URL reflète l'onglet sélectionné

Nous allons décrire trois étapes principales; le HTML, le CSS et le JavaScript. Un certain niveau de compétence pour ces trois éléments est supposé. Heureux de voir comment nous allons construire cela? Si la réponse est oui, commençons!

1. Construire les onglets

Nous allons commencer les choses avec un modèle de démarrage tiré de la documentation de Bootstrap.

        Comment ajouter une liaison profonde au composant Bootstrap 4 Tabs

Pour créer les onglets, nous allons utiliser un exemple de code pour le composant d'onglet fourni par Bootstrap: 

     
  •  Accueil 
    •  
  •  L'histoire 
    •  
  •  Attractions de la ville 
    •

2. Le CSS

Ensuite, nous spécifions quelques règles CSS pour notre composant. Rien d'extraordinaire, juste quelques styles de base. Il est à noter que dans un précédent tutoriel, nous avons utilisé des styles similaires pour créer un composant d'onglet personnalisé..

Voici les styles initiaux:

.nav-mytabs margin-top: 2rem;  .nav-mytabs li: not (: last-child) margin-right: 7px;  .nav-mytabs a position: relative; en haut: 4 px; rembourrage: 10px 25px; border-radius: 2px 2px 0 0; fond blanc; la couleur noire; opacité: 0,7; transition: toutes les 0,1s se calment;  .nav-mytabs a.active, .nav-mytabs a: hover opacity: 1; en haut: 0;  .mytab-content position: relative; z-index: 2; rembourrage: 25px; border-radius: 0 4px 4px 4px; fond blanc;

3. Le JavaScript

Avec le HTML et le CSS en place, il est temps d'examiner le code JavaScript requis (c'est le bit important).

Tout d'abord, lorsque le DOM est prêt, nous récupérons l'URL de la page et utilisons une expression régulière pour supprimer sa barre oblique finale. Par exemple, si l'URL d'origine est quelque chose/, l'URL modifiée sera quelque chose.

Ensuite, nous vérifions si l’URL contient un hachage. Si tel est le cas, cela signifie que nous voulons afficher le contenu du deuxième ou du troisième onglet (dans notre exemple). Pour ce faire, nous procédons comme suit:

  1. Récupérer le nom de l'onglet cible et l'activer à l'aide de Bootstrap languette méthode.
  2. Utilisez une expression régulière pour générer le format d'URL souhaité.
  3. Mettez à jour l'URL de la page sans forcer le rechargement de la page en tirant parti du replaceState méthode.
  4. Facultativement, forcez le défilement de page pour commencer par le haut de la page.

Chaque fois que nous cliquons sur un onglet, nous procédons comme suit:

  1. Récupérer le href valeur d'attribut de cet onglet. Dans notre cas, les valeurs possibles sont #maison, #l'histoire, # ville-attractions.
  2. Vérifiez la valeur de l'attribut et, en fonction de cela, créez le format d'URL souhaité. 
  3. Mettez à jour l'URL de la page sans forcer le rechargement de la page en tirant parti du replaceState méthode.

Voici le JavaScript qui s'occupe de tout ça:

$ (document) .ready (() => let url = location.href.replace (/ \ / $ /, ""); if (location.hash) const hash = url.split ("#"); $ ('#myTab a [href = "#' + hash [1] + '"]'). tab ("show"); url = location.href.replace (/ \ / # /, "#"); history.replaceState (null, null, url); setTimeout (() => $ (window) .scrollTop (0);, 400); $ ('a [data-toggle = "tab"] "). on ("click", function () let newUrl; const hash = $ (this) .attr ("href"); if (hash == "#home") newUrl = url.split ("#") [ 0]; else newUrl = url.split ("#") [0] + hash; newUrl + = "/"; history.replaceState (null, null, newUrl);););

4. Support du navigateur

La démo devrait bien fonctionner dans tous les navigateurs récents. Pour des raisons de simplicité, je n’ai pas utilisé de compilateur JavaScript (Babel, par exemple), mais vous devrez peut-être utiliser votre propre code..

Conclusion

Dans ce didacticiel, nous avons réussi à personnaliser le comportement des onglets Bootstrap 4 en attribuant à chaque onglet une URL identifiable, ce qui rend son contenu plus facile à naviguer et à partager. Gardez à l'esprit que le processus mis en œuvre ici peut également être appliqué à tout autre framework ou même à un composant d'onglet personnalisé..

S'il y a quelque chose que vous n'avez pas compris, ou si quelque chose vous semble incertain, faites-le-moi savoir dans les commentaires ci-dessous!

Lectures complémentaires


Création de sites web
×