Accentsconagua

Come aggiungere il deep link al componente Bootstrap 4 Tabs

Web design
Share

Oggi impareremo come aggiungere "deep linking" alle schede di Bootstrap 4. Per capire meglio a cosa stiamo lavorando, controlla la pagina demo e presta attenzione a due cose:

  1. Come cambia l'URL quando fai clic sulle schede.
  2. Dando a ciascuna delle schede il proprio URL, il contenuto diventa condivisibile. Se prendi l'URL di una scheda e lo apri in un altro browser / finestra, la scheda corrispondente sarà visibile.


Si noti che l'URL riflette la scheda selezionata

Illustreremo tre passaggi principali; l'HTML, il CSS e il JavaScript. Si presume un certo livello di competenza per tutti e tre questi. Emozionato per vedere come lo costruiremo? Se la risposta è sì, iniziamo!

1. Costruire le schede

Daremo il calcio d'inizio con un modello iniziale preso dalla documentazione di Bootstrap.

        Come aggiungere il deep link al componente Bootstrap 4 Tabs

Per creare le schede, trarremo vantaggio dal codice di esempio per il componente di tabulazione fornito da Bootstrap: 

     
  •  Casa 
    •  
  •  Storia 
    •  
  •  Attrazioni della città 
    •

2. Il CSS

Quindi specifichiamo alcune regole CSS per il nostro componente. Niente di stravagante, solo alcuni stili di base. Vale la pena ricordare che in un precedente tutorial, abbiamo utilizzato stili simili per creare un componente di tabulazione personalizzato.

Ecco gli stili iniziali:

.nav-mytabs margin-top: 2rem;  .nav-mytabs li: not (: last-child) margin-right: 7px;  .nav-mytabs a position: relative; top: 4px; imbottitura: 10px 25px; border-radius: 2px 2px 0 0; sfondo: bianco; colore nero; opacità: 0,7; transizione: tutti gli 0.1s easy-in-out;  .nav-mytabs a.active, .nav-mytabs a: hover opacity: 1; inizio: 0;  .mytab-content position: relative; z-index: 2; imbottitura: 25px; border-radius: 0 4px 4px 4px; sfondo: bianco;

3. Il JavaScript

Con HTML e CSS in atto, è tempo di guardare il codice JavaScript richiesto (questo è il bit importante).

Innanzitutto, quando il DOM è pronto, recuperiamo l'URL della pagina e usiamo un'espressione regolare per rimuovere la sua barra finale. Ad esempio, se l'URL originale è qualcosa/, l'URL modificato sarà qualcosa.

Successivamente, controlliamo se l'URL contiene un hash. Se questo è il caso, significa che vogliamo visualizzare il contenuto della seconda o terza scheda (nel nostro esempio). Per fare ciò, eseguiamo quanto segue:

  1. Recupera il nome della scheda di destinazione e attivalo utilizzando Bootstrap linguetta metodo.
  2. Utilizzare un'espressione regolare per generare il formato URL desiderato.
  3. Aggiorna l'URL della pagina senza forzare la ricarica della pagina sfruttando il replaceState metodo.
  4. Facoltativamente, forza lo scorrimento della pagina per iniziare dalla parte superiore della pagina.

Ogni volta che clicchiamo su una scheda facciamo quanto segue:

  1. Recupera il href valore attributo di questa scheda. Nel nostro caso, i valori possibili sono #casa, #storia, # nome della città-attrazioni.
  2. Controlla il valore dell'attributo e, a seconda di ciò, crea il formato URL desiderato. 
  3. Aggiorna l'URL della pagina senza forzare la ricarica della pagina sfruttando il replaceState metodo.

Ecco il JavaScript che si occupa di tutto ciò:

$ (document) .ready (() => let url = location.href.replace (/ \ / $ /, ""); if (location.hash) const hash = url.split ("#"); $ ('# myTab a [href = "#' + hash [1] + '"]'). tab ("mostra"); 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. Supporto per browser

La demo dovrebbe funzionare bene in tutti i browser recenti. Per semplicità, non ho usato un compilatore JavaScript (ad esempio Babel), ma nel tuo codice personale potresti doverlo fare.

Conclusione

In questo tutorial, siamo riusciti a personalizzare il comportamento delle schede Bootstrap 4, assegnando ad ogni scheda un URL identificabile, rendendo il loro contenuto più navigabile e condivisibile. Tieni presente che il processo qui implementato può anche essere applicato a qualsiasi altro framework o persino a un componente di tabulazione personalizzato.

Se c'è qualcosa che non hai capito, o qualsiasi cosa non ti è chiara, fammelo sapere nei commenti qui sotto!

Ulteriori letture


Web design
×