Accentsconagua

Hinzufügen von Deep Linking zur Komponente Bootstrap 4 Tabs

Web-Design
Share

Heute lernen wir, wie Sie den Bootstrap 4-Registerkarten "Deep Linking" hinzufügen. Um besser zu verstehen, woran wir arbeiten, schauen Sie sich die Demo-Seite an und achten Sie auf zwei Dinge:

  1. Wie sich die URL ändert, wenn Sie auf die Registerkarten klicken.
  2. Wenn Sie jedem Tab eine eigene URL zuweisen, wird der Inhalt gemeinsam genutzt. Wenn Sie sich die URL einer Registerkarte holen und sie in einem anderen Browser / Fenster öffnen, wird die entsprechende Registerkarte angezeigt.


Beachten Sie, dass die URL der ausgewählten Registerkarte entspricht

Wir werden drei Hauptschritte skizzieren. HTML, CSS und JavaScript. Für alle drei wird ein gewisses Maß an Kompetenz vorausgesetzt. Aufgeregt zu sehen, wie wir das bauen werden? Wenn die Antwort ja ist, lass uns anfangen!

1. Erstellen der Registerkarten

Wir beginnen mit einer Starter-Vorlage aus der Bootstrap-Dokumentation.

        Hinzufügen von Deep Linking zur Komponente "Bootstrap 4 Tabs"

Um die Registerkarten zu erstellen, verwenden wir Beispielcode für die von Bootstrap bereitgestellte Registerkomponente: 

     
  •  Zuhause 
    •  
  •  Geschichte 
    •  
  •  Sehenswürdigkeiten in der Stadt 
    •

2. Das CSS

Als Nächstes geben wir einige CSS-Regeln für unsere Komponente an. Nichts Besonderes, nur einige Grundstile. Es ist erwähnenswert, dass wir in einem früheren Tutorial ähnliche Stile zum Erstellen einer benutzerdefinierten Registerkomponente verwendet haben.

Hier sind die Anfangsstile:

.nav-mytabs margin-top: 2rem;  .nav-mytabs li: nicht (: letztes Kind) margin-right: 7px;  .nav-mytabs a position: relative; oben: 4px; Polsterung: 10px 25px; Grenzradius: 2px 2px 0 0; Hintergrund: weiß; Farbe schwarz; Deckkraft: 0,7; Übergang: alle 0,1s Easy-In-Out;  .nav-mytabs a.aktiv, .nav-mytabs a: hover Deckkraft: 1; oben: 0;  .mytab-content position: relativ; z-Index: 2; Polsterung: 25px; Grenzradius: 0 4px 4px 4px; Hintergrund: weiß;

3. Das JavaScript

Wenn HTML und CSS vorhanden sind, ist es an der Zeit, den erforderlichen JavaScript-Code zu prüfen (dies ist das wichtigste Bit)..

Wenn das DOM fertig ist, rufen wir die Seiten-URL ab und verwenden einen regulären Ausdruck, um den nachfolgenden Schrägstrich zu entfernen. Zum Beispiel, wenn die ursprüngliche URL lautet etwas/, Die geänderte URL wird sein etwas.

Als Nächstes prüfen wir, ob die URL einen Hash enthält. In diesem Fall möchten wir den Inhalt der zweiten oder dritten Registerkarte anzeigen (in unserem Beispiel). Dazu führen wir folgendes aus:

  1. Rufen Sie den Namen der Zielregisterkarte ab und aktivieren Sie sie mithilfe von Bootstrap Tab Methode.
  2. Verwenden Sie einen regulären Ausdruck, um das gewünschte URL-Format zu generieren.
  3. Aktualisieren Sie die Seiten-URL, ohne ein Neuladen der Seite zu erzwingen replaceState Methode.
  4. Erzwingen Sie optional den Seiten-Bildlauf, um am oberen Seitenrand zu beginnen.

Jedes Mal, wenn wir auf eine Registerkarte klicken, machen wir Folgendes:

  1. Rufen Sie das ab href Attributwert dieser Registerkarte. In unserem Fall sind die möglichen Werte #Zuhause, #Geschichte, # Stadtattraktionen.
  2. Überprüfen Sie den Attributwert und erstellen Sie abhängig davon das gewünschte URL-Format. 
  3. Aktualisieren Sie die Seiten-URL, ohne ein Neuladen der Seite zu erzwingen replaceState Methode.

Hier ist das JavaScript, das sich um all das kümmert:

$ (document) .ready (() => lass 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. Browserunterstützung

Die Demo sollte in allen aktuellen Browsern gut funktionieren. Der Einfachheit halber habe ich keinen JavaScript-Compiler (z. B. Babel) verwendet, aber in Ihrem eigenen Code müssen Sie dies möglicherweise tun.

Fazit

In diesem Lernprogramm ist es uns gelungen, das Verhalten der Registerkarten von Bootstrap 4 anzupassen, indem jeder Registerkarte eine identifizierbare URL zugewiesen wurde, wodurch der Inhalt navigierbarer und gemeinsam nutzbar ist. Beachten Sie, dass der hier implementierte Prozess auch auf jedes andere Framework oder sogar auf eine benutzerdefinierte Registerkomponente angewendet werden kann.

Wenn Sie etwas nicht verstanden haben oder Ihnen etwas unklar erscheint, lassen Sie es mich in den folgenden Kommentaren wissen!

Lesen Sie weiter


Web-Design
×