Accentsconagua

Hoe Deep Linking aan de component Bootstrap 4 Tabs toe te voegen

Web ontwerp
Share

Vandaag leren we hoe we "deep linking" kunnen toevoegen aan de Bootstrap 4-tabbladen. Om beter te begrijpen waar we naartoe werken, bekijk de demopagina en let op twee dingen:

  1. Hoe de URL verandert als u op de tabbladen klikt.
  2. Door elk van de tabs een eigen URL te geven, kan de inhoud worden gedeeld. Als u de URL van een tabblad pakt en opent in een andere browser / venster, is het bijbehorende tabblad zichtbaar.


Merk op dat de URL het geselecteerde tabblad weerspiegelt

We zullen drie hoofdstappen beschrijven; de HTML, de CSS en de JavaScript. Een bepaald competentieniveau voor deze drie wordt verondersteld. Opgewonden om te zien hoe we dit gaan bouwen? Als het antwoord ja is, laten we beginnen!

1. De tabbladen samenstellen

We zullen beginnen met een startersjabloon uit de documentatie van Bootstrap.

        Hoe Deep Linking aan de component Bootstrap 4 Tabs toe te voegen

Om de tabbladen te maken, maken we gebruik van voorbeeldcode voor het tabbladonderdeel dat Bootstrap biedt: 

     
  •  Huis 
    •  
  •  Geschiedenis 
    •  
  •  Stadsattracties 
    •

2. De CSS

Vervolgens specificeren we een paar CSS-regels voor onze component. Niets bijzonders, slechts enkele basisstijlen. Het is de moeite waard te vermelden dat we in een eerdere zelfstudie soortgelijke stijlen hebben gebruikt om een ​​aangepast tabbladonderdeel te maken.

Dit zijn de beginstijlen:

.nav-mytabs margin-top: 2rem;  .nav-mytabs li: not (: last-child) margin-right: 7px;  .nav-mytabs a position: relative; top: 4px; opvulling: 10px 25px; grensradius: 2px 2px 0 0; achtergrond: wit; de kleur zwart; opaciteit: 0,7; overgang: alle 0,1s gemak in-uit;  .nav-mytabs a.active, .nav-mytabs a: hover opacity: 1; boven: 0;  .mytab-content positie: relatief; z-index: 2; opvulling: 25px; grensradius: 0 4px 4px 4px; achtergrond: wit;

3. Het JavaScript

Met de HTML en CSS op zijn plaats, is het tijd om naar de vereiste JavaScript-code te kijken (dit is het belangrijke bit).

Ten eerste, wanneer de DOM gereed is, halen we de pagina-URL op en gebruiken we een reguliere expressie om de bijbehorende schuine streep te verwijderen. Bijvoorbeeld als de originele URL is iets/, de gewijzigde URL zal zijn iets.

Vervolgens controleren we of de URL hash bevat. Als dat het geval is, betekent dit dat we de inhoud van het tweede of derde tabblad (in ons voorbeeld) willen weergeven. Om dit te doen, voeren wij het volgende uit:

  1. Haal de naam van het doeltabblad op en activeer het met Bootstrap's tab methode.
  2. Gebruik een reguliere expressie om de gewenste URL-indeling te genereren.
  3. Werk de pagina-URL bij zonder een pagina opnieuw te laden door gebruik te maken van de replaceState methode.
  4. Optioneel, forceer de paginarol om vanaf de bovenkant van de pagina te beginnen.

Elke keer dat we op een tabblad klikken, doen we het volgende:

  1. Haal de href attribuutwaarde van dit tabblad. In ons geval zijn de mogelijke waarden #huis, #geschiedenis, # City-attracties.
  2. Controleer de attribuutwaarde en bouw, afhankelijk van dat, de gewenste URL-indeling. 
  3. Werk de pagina-URL bij zonder een pagina opnieuw te laden door gebruik te maken van de replaceState methode.

Hier is de JavaScript die zorgt voor dat alles:

$ (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. Browserondersteuning

De demo zou goed moeten werken in alle recente browsers. Om het eenvoudig te houden, heb ik geen JavaScript-compiler (bijvoorbeeld Babel) gebruikt, maar in je eigen code zou dat wel moeten.

Conclusie

In deze zelfstudie zijn we erin geslaagd het gedrag van de Bootstrap 4-tabbladen aan te passen door elk tabblad een herkenbare URL te geven, waardoor hun inhoud beter navigeerbaar en deelbaar is. Houd er rekening mee dat het hier geïmplementeerde proces ook kan worden toegepast op elk ander framework of zelfs op een aangepast tabbladonderdeel.

Als er iets is dat u niet begrijpt of als iets u niet duidelijk lijkt, laat het me weten in de onderstaande opmerkingen!

Verder lezen


Web ontwerp
×