Cod HTML css pentru exemple de paginare. Bootstrap - Paginare (bloc de navigare pentru paginare). Conectarea cadrelor necesare

În acest articol, vom analiza procesul de creare a unui astfel de element de interfață web ca un bloc de navigare pentru paginare. În Bootstrap 3 și 4, acest element UI este implementat utilizând componenta Pagination.

Ce este paginarea?

Paginarea este o paginare a datelor. Acestea. aceasta este o astfel de concluzie, când datele sunt transmise nu deodată, dar piese mici (pagini).

Blocul de navigare este utilizat pentru a naviga prin aceste părți (pagini).

Componenta Pagination din cadrul Bootstrap este doar destinată să creeze acest element de interfață, adică bloc de navigare .

Crearea unui bloc de navigare pentru paginare

În Bootstrap 3, caseta de navigare are următoarea structură:

Elementul nav din acest fragment acționează ca un container de împachetare. Este necesar în această structură numai pentru tehnologiile de asistență a perceput această bucată de cod HTML ca o navigație.

În plus, este recomandabil ca tehnologiile de asistență să clarifice și ce fel de bloc de navigație este. Această acțiune este realizată prin atributul aria-label.

Marcarea blocului nav pentru paginare în Bootstrap se face cu listă cu puncte ... Fiecare legătură navală din acest bloc este un a înfășurat într-un li și plasat într-un ul.

Stilul vizual al casetei de nav din Bootstrap se face folosind clasa de paginare, care trebuie adăugată la ul.

Structura blocului de navigare în Bootstrap 4:

Rețineți că în Bootstrap 4, trebuie să adăugați clase la elementele li și a. Li este clasa de element de pagină, iar a este link-ul de pagină. Aceste clase stabilesc stiluri CSS pentru elemente și sunt necesare pentru afișarea corectă a blocului de navigare.

Folosind pictograme sau pictograme în loc de etichete text

Un exemplu de bară de navigare a paginării care folosește pictograme ca conținut pentru unele linkuri:

Modificarea stării unui link de navigare

Schimbarea stării legăturilor în bara de navigație se face folosind clasele dezactivate și active. Prima clasă (dezactivată) este utilizată pentru a crea un link inactiv (care nu poate fi făcut clic). A doua clasă (activă) este necesară pentru a evidenția (indica) pagina curenta... Trebuie să adăugați clasele active și dezactivate nu la link-ul în sine, ci la elementul li.

Seturile de clase cu handicap Link-uri CSS declarație pointer-events: niciuna. Acest anunț este destinat să dezactiveze funcționalitatea linkului. Dar nu dezactivează navigarea pe tastatură. Prin urmare, dacă doriți să dezactivați complet funcționalitatea acestor linkuri în proiectul dvs., atunci folosind JavaScript trebuie să le urmăriți suplimentar și să le adăugați atributul tabindex = "- 1".

O altă modalitate de a dezactiva funcționalitatea linkului este nu folosiți elementul a.

Redimensionarea casetei de navigare

În Bootstrap 3 și 4, puteți redimensiona caseta nav utilizând clasele pagination-lg și pagination-sm. Acest lucru se realizează prin adăugarea uneia dintre aceste clase la clasa de paginare.

Prima clasă (pagination-lg) este utilizată atunci când este necesar să se mărească dimensiunea navigării, iar a doua (pagination-sm) atunci când este necesar să o reducă.

Alinierea casetei de navigare

În Bootstrap 3, alinierea barei de navigație pentru paginare se face cu clase pentru alinierea textului.

În Bootstrap 4, alinierea navbarului pentru paginare se face folosind clase flex.

Componenta Pager (Bootstrap 3)

Pager este o componentă Bootstrap 3 care este concepută pentru a crea o navigare simplă prin pagini sau alt conținut al site-ului. Această componentă este formată din 2 butoane (link-uri).

Una dintre cele mai frecvente utilizări pentru această navigație este de a o face astfel încât primul buton s-a mutat la mai multe intrare nouă pe site, iar al doilea - la cel mai vechi.

Sintaxa pentru componenta Pager este:

Schimbarea aspectului butonului

În mod implicit, butoanele de pager aliniat la centru... Dar, pe lângă această opțiune, Bootstrap 3 le permite, de asemenea, să fie aliniate pe margini diferite. Acest lucru se face prin adăugarea clasei anterioare la primul buton și lângă al doilea. Clasa anterioară aliniază legătura la stânga și lângă dreapta.

Dezactivați funcționalitatea butonului

Comutarea unui buton într-o stare dezactivată se face prin adăugarea clasei dezactivate la acesta.

Paginarea, sau pur și simplu navigarea pagină cu pagină, este un element important al oricărui site mai mult sau mai puțin complet. Diferite sisteme de gestionare a conținutului, în cea mai mare parte, au instrumente încorporate pentru implementarea paginării. Există, de asemenea, o mulțime de plugin-uri separate scrise pentru această afacere utilă, în majoritatea cazurilor sunt construite folosind biblioteca. Toate aceste pluginuri, diferite prin stilul de performanță și software funcționalitate, dar cel mai important, toate acestea, aceasta este o alternativă excelentă la implementarea pe pagină a serverului a paginării site-urilor de conținut mare.

În opinia mea, propun spre luare în considerare una dintre cele mai ușoare pluginuri jQuery pentru a crea navigare paginată care vă ajută să organizați, paginarea atractivă și rapidă.

Foarte ușor din toate punctele de vedere și din greutate, și totul despre conectivitate, setări, paginare rapidă, completată cu trei stiluri de design și taxată pentru asistență.

Apropo, dacă nu sunteți mulțumit de stilurile standard, îl puteți folosi, ceea ce nu va fi dificil de înșurubat .css conecteaza.

Acum, să aruncăm o privire mai atentă despre cum să conectăm corect pluginul în sine și fișierul de stil la document, adică să îl încorporăm direct în paginile site-ului și să trecem prin setările disponibile ale pluginului.

Mai întâi, bineînțeles, trebuie să obțineți un plugin, adică cu codul sursă, în care sunteți înșelați cu atenție jquery javascriptși o foaie de stil CSS.

Să facem pas cu pas modul de utilizare a pluginului:

Pasul 1. Inclusiv jQuery

În corpul paginii către secțiune ... trebuie să conectați cadrul jQuery, de preferință versiunea 1.7.2 sau mai recent, puteți face acest lucru folosind un spațiu de stocare special Google:

Dacă aveți deja jQuery activat pe site-ul dvs. și lucrați cu forța și forța principală, puteți sări peste toate gesturile descrise mai sus, principalul lucru fiind să vă asigurați că versiunea jQuery nu este prea densă. Apropo, în WordPress, este bine.
Apoi, ne conectăm cal de lucru- conecteaza jquery.simplePagination.js:

Nu trebuie să îngrădiți în grădină, ci pur și simplu selectați stilul dorit, deschis, întunecat sau compact și lipiți setul de reguli în fișierul stylesheet.css al șablonului. Scrieți-vă propriile stiluri sau folosiți-le Bootstrap, de asemenea, o opțiune, în ceea ce privește originalitatea și dezvoltarea abilităților de construire a șantierului, este și mai preferabilă.

Pasul 3. HTML

Pentru a afișa bara de paginare pe paginile site-ului, unde intenționați să o plasați, este mai logic și cel mai adesea, se află în partea de jos a conținutului principal, ar trebui să scrieți următoarele:
Pentru un fundal deschis:

Tema compactă:

$ (function () ($ (# light-pagination) .pagination ((items: 100, itemsOnPage: 10, cssStyle: "light-theme"));));

În exemplu, am folosit inițializarea pentru a pagina tema light # light-pagination, puteți schimba selectorul cu altceva, pentru unul compact este # compact-pagination sau pentru un stil întunecat # dark-pagination. În acest caz, nu uitați să schimbați și clasa în funcție. cssStyle.
Kai am scris deja mai sus, pluginul este foarte flexibil în setări, următoarele opțiuni sunt disponibile pentru schimbare:

• obiecte- Numărul total de elemente care trebuie utilizate pentru calcularea paginilor. Mod implicit: 1 .
• itemsOnPage- Numărul de articole afișate pe fiecare pagină. Mod implicit: 1 .
• pagini- Opțional. Dacă este specificat, elementele și opțiunile itemsOnPage sunt ignorate. Setează numărul de pagini din listă.
• Paginile afișate- Câte numere de pagină ar trebui să fie vizibile în timpul navigării. Valoarea minimă permisă: 3 , Mod implicit: 5 .
• margini- Câte numere de pagină sunt vizibile la începutul și la sfârșitul numerotării. Valoare implicită: 2 .
• pagina curenta- Ce pagină va fi selectată imediat după lansare. În mod logic, valoarea implicită este: 1 .
• hrefTextPrefix- Șirul utilizat în atributul HREF este adăugat înainte de numărul paginii. Mod implicit: „# pagină-”.
• hrefTextSuffix- Șirul utilizat în atributul HREF este inserat după numărul paginii. Implicit este un șir gol.
• prevText- Textul butonului la pagina anterioară. Mod implicit: „Anterior”.
• nextText- Text buton pentru pagina următoare. Mod implicit: "Următorul"
• cssStyle- A determina Stil CSS... Mod implicit: „Light-theme”
• selectați Pe clic- Selectarea unei pagini după clic, implicit - activat ( Adevărat), de ce nu am înțeles de ce să-l dezactivez, dar există o astfel de posibilitate, valoare: „fals”.

Am acoperit cele mai simple setări. O funcții suplimentareși metodele disponibile de utilizare a acestui plugin, le puteți afla studiind documentația direct pe pagina dezvoltatorului.

Tot ce pot face este să vă doresc mult succes și succes în lucrul la noile dvs. proiecte.

Paginarea, inclusiv navigarea în pagini, este un lucru destul de simplu, dar începătorii au deseori probleme în crearea ei și, cel mai important, înțelegerea modului în care funcționează ...

Una dintre sarcinile paginării este afișarea simultană a tuturor elementelor, dar numărul lor limitat, să zicem, nu mai mult de $ pp elemente, și care grup de elemente este afișat depinde de parametrul de intrare $ pn - numărul acestui grup. Acest număr, de fapt, este numărul paginii. Aici aveți nevoie de o astfel de solicitare:

SELECT * FROM `table` LIMIT (($ pn-1) * $ pp), ($ pp)

Valoarea $ pn este redusă cu 1, astfel încât, de exemplu, pentru prima pagină a listei cu o valoare de $ pp egală cu 10, sunt selectate elemente de la 0 la 9 și nu de la 10 la 19. Bineînțeles, dacă paginile sunt numerotate de la zero, scăderea valorii de $ cu 1 pn nu este necesară în cerere.

Pentru a rezolva următoarea problemă, și anume construirea navigării pe pagină, trebuie mai întâi să cunoașteți numărul total de pagini din listă. Pentru a face acest lucru, puteți interoga mai întâi numărul total de articole. Sau, chiar în cerere, calculați numărul total de pagini pe baza numărului total de articole:

SELECTARE ETAJ ((COUNT (*) + ($ pp-1)) / ($ pp)) DIN `tabel`

Pentru a obține numărul total de pagini $ pc, se folosește aici binecunoscuta formulă $ pc = (count + per_page-1) div per_page, dar ajustată pentru utilizarea funcției FLOOR în locul diviziunii întregi (div). Puteți utiliza, de asemenea, operatorul DIV, care a fost acceptat în MySQL de mult timp.

Dacă trebuie să afișați un singur element pe rând pe pagini, interogările de mai sus pot fi simplificate.

După ce a fost primit numărul total de pagini de $ pc, puteți afișa imediat link-uri către toate paginile din listă utilizând o buclă cu un contor în intervalul de la 1 la $ pc, cu toate acestea, este de obicei utilizată o navigare mai sofisticată, în care linkurile nu sunt afișate simultan pe toate paginile, ci doar pe paginile cu numere într-un interval limitat, în funcție de numărul paginii curente. De exemplu, iată formulele pentru a obține valorile de limitare $ first și $ last pentru așa-numita navigare bancară:

$ primul = $ pn-1 - ($ pn-2)% $ interval; $ last = $ first + $ range<$pc?$first+$range:$pc;

În intervalul $, trebuie să puneți o valoare cu 1 mai mică decât lățimea necesară a intervalului, de exemplu, pentru a afișa nu mai mult de șapte legături obișnuite către pagini din intervalul $, trebuie să puneți valoarea 6. Dacă combinați toate cele de mai sus, obțineți următoarele:

$ pp = 10; if ($ result = mysqli_query ($ link, "SELECT FLOOR ((COUNT (*) +". ($ pp-1). ") /". $ pp. ") FROM` table` ")) (list ($ pc) = mysqli_fetch_row ($ result); mysqli_free_result ($ result); // rotatorul numerelor de pagină 0 și 1 poate fi plasat aici dacă ($ pn == 0 || $ pn> $ pc) eroare (404); elseif ($ result = mysqli_query ($ link, "SELECT * FROM` table` LIMIT". (($ pn-1) * $ pp). ",". $ pp)) ($ range = 6; $ first = $ pn -1- ($ pn-2)% $ interval; $ last = $ primul + $ interval<$pc?$first+$range:$pc; } else error(503); } else error(503);

Tot ce rămâne este să afișați bara de navigare:

În implementarea prezentată, primul link obișnuit (dacă nu este un link către prima pagină) vă permite să treceți la banca de pagini anterioară. Dacă doriți ca și ultimul link regulat să vă permită să treceți la următoarea bancă de pagini (adică funcționează similar link-ului „Mai multe” și îl poate înlocui), puteți specifica expresia ($ range-1) ca un divizor în prima formulă în loc de variabila $ range.

Funcția pagelink este responsabilă pentru formarea părții link-ului în care este setat numărul paginii. Atunci când utilizați un rotator cu numerele de pagină 0 și 1, este mai bine să plasați această funcție lângă rotator, deoarece ar trebui să compenseze efectul rotatorului, permițându-vă să obțineți adresa / în loc de /? p = 1 în link pentru a se potrivi cu valoarea zero a parametrului de intrare $ pn:

Funcția pagelink ($ p) (returnează $ p> 1? "? P =". $ P: "";) if ($ pn == 0) $ pn ++; elseif ($ pn == 1) $ pn--;

Site-urile conțin de obicei mai multe pagini. Pot conține până la 3-5 pagini, de exemplu, pe o pagină de destinație sau poate mai multe, mult mai multe.

Fiecare site bun ar trebui să conțină navigare care să permită utilizatorului să navigheze și să navigheze corect între paginile site-ului. Puteți crea o astfel de paginare folosind JavaScript. În acest articol, vom vorbi despre cum să creați acest tip de navigare.

Un alt punct, în afară de JavaScript obișnuit, exemplul folosește Bootstrap 4. Componenta sa de paginare bootstrap este combinată cu biblioteca jQuery, și anume pluginul special Buzina Pagination. Vă permite să împărțiți toate informațiile în mai multe pagini cu crearea de navigație între ele.

Conectarea cadrelor necesare

Pentru a lucra cu Bootstrap și JQuery, trebuie să le conectați. Acest lucru se poate face în documentul dvs. HTML folosind etichete