Accentsconagua

Cum se adaugă legătura profundă cu componenta Componente tabulare Bootstrap 4

Web design
Share

Astăzi vom învăța cum să adăugăm "corelarea profundă" cu filele Bootstrap 4. Pentru a înțelege mai bine la ce lucrăm, verificați pagina demo și acordați atenție următoarelor două aspecte:

  1. Modul în care se modifică adresa URL când faceți clic pe file.
  2. Prin acordarea fiecărei file a unei adrese URL proprii, conținutul devine accesibil. Dacă luați URL-ul unei file și deschideți-o într-un alt browser / fereastră, fila corespunzătoare va fi vizibilă.


Rețineți că adresa URL reflectă fila selectată

Vom descrie trei pași principali; HTML, CSS și JavaScript. Se presupune un anumit nivel de competență pentru toate cele trei. Ești încântat să vezi cum vom construi acest lucru? Dacă răspunsul este da, să începem!

1. Construirea filelor

Vom schimba lucrurile cu un șablon de pornire preluat din documentația lui Bootstrap.

        Cum se adaugă legătura profundă cu componenta Componente tabulare Bootstrap 4

Pentru a crea filele, vom profita de codul exemplu pentru componenta tabelă pe care o oferă Bootstrap: 

     
  •  Acasă 
    •  
  •  Istorie 
    •  
  •  Orasul Attractions 
    •

2. CSS

Apoi specificăm câteva reguli CSS pentru componenta noastră. Nimic prea fantezist, doar câteva stiluri de bază. Merită menționat faptul că într-un tutorial anterior, am folosit stiluri similare pentru a construi o componentă tabulară personalizată.

Iată stilurile inițiale:

.nav-mytabs margin-top: 2rem;  .nav-mytabs li: nu (: ultimul-copil) margin-right: 7px;  .nav-mytabs o poziție: relativă; top: 4px; padding: 10px 25px; raza de graniță: 2px 2px 0 0; fundal: alb; culoarea neagra; opacitate: 0,7; tranziție: toate cu ușurință în afară;  .nav-mytabs a.active, .nav-mytabs a: hover opacitate: 1; top: 0;  .mytab-content poziție: relativă; z-index: 2; padding: 25px; raza de graniță: 0 4px 4px 4px; fundal: alb;

3. JavaScript-ul

Cu HTML și CSS în loc, este timpul să se uite la codul JavaScript necesar (acesta este bitul important).

Mai întâi, când DOM este gata, vom prelua adresa URL a paginii și vom folosi o expresie regulată pentru a elimina slash-ul acesteia. De exemplu, dacă adresa URL inițială este ceva/, adresa URL modificată va fi ceva.

Apoi, verificăm dacă adresa URL conține un hash. În acest caz, înseamnă că dorim să afișăm conținutul filei a doua sau a treia (în exemplul nostru). Pentru aceasta, efectuăm următoarele:

  1. Extrageți numele filei țintă și activați-o utilizând Bootstrap fila metodă.
  2. Utilizați o expresie regulată pentru a genera formatul URL dorit.
  3. Actualizați adresa URL a paginii fără a forța o reîncărcare a paginii utilizând avantajul replaceState metodă.
  4. Opțional, forțați derularea paginii pentru a începe din partea de sus a paginii.

De fiecare dată când dăm clic pe o filă, procedăm după cum urmează:

  1. Preluați href valoarea atributului din această filă. În cazul nostru, valorile posibile sunt #Acasă, #istorie, # city-atracții.
  2. Verificați valoarea atributului și, în funcție de aceasta, construiți formatul URL dorit. 
  3. Actualizați adresa URL a paginii fără a forța o reîncărcare a paginii utilizând avantajul replaceState metodă.

Iată JavaScript-ul care are grijă de toate acestea:

$ (document) .ready (() => url = location.href.replace (/ \ / $ /, ""); $ ('# myTab a [href = "#' + hash [1] + '"]'). ($) ($) ($) ($) ($) ($) ($). pe ("faceți clic", funcția () let.new (); const hash = $ (this) .attr ("href" 0]; altceva newUrl = url.split ("#") [0] + hash; newUrl + = "/";

4. Suport pentru browsere

Demo-ul ar trebui să funcționeze bine în toate browserele recente. Pentru simplificare, nu am folosit un compilator JavaScript (de exemplu, Babel), dar în codul dvs. propriu-ar putea fi necesar.

Concluzie

În acest tutorial, am reușit să personalizăm comportamentul fișierelor Bootstrap 4, oferind fiecare filă o adresă URL identificabilă, făcând conținutul lor mai navigabil și mai ușor de trimis. Rețineți că procesul implementat aici poate fi aplicat și pentru orice alt cadru sau chiar pentru o componentă tabulară personalizată.

Dacă este ceva ce nu ați înțeles sau ceva vă pare neclar, spuneți-mi în comentariile de mai jos!

Citirea în continuare


Web design
×