Zbirka besplatnih primjera HTML i CSS kodova za označavanje stranica: responzivan, jednostavan, materijalni dizajn, navigacijske točkice itd. Ažuriranje kolekcije za lipanj 2018. 5 novih stavki.
povezani članci
O šifri Responzivna paginacija/stranica u HTML-u i CSS-u. Promijenite veličinu preglednika kako biste pokazali zanimljiv učinak.
Odgovarajući: da
Ovisnosti: bootstrap.css
O kodu Line Follow PaginationCSS linija slijedi paginaciju.
Odgovarajući: da
Ovisnosti: -
O gumbima za paginaciju kodaČisti CSS gumbi za označavanje stranica.
Kompatibilni preglednici: Chrome, Firefox, Opera, Safari
Odgovarajući: da
Ovisnosti: -
O kodu Line Pagination with HoverČisto CSS označavanje stranica s efektom lebdenja.
Kompatibilni preglednici: Chrome, Edge, Firefox, Opera, Safari
Odgovarajući: da
Ovisnosti: -
O kodu Pacman PaginationAnimacija paginacije s HTML-om, CSS-om i JS-om.
Kompatibilni preglednici: Chrome, Edge, Firefox, Opera, Safari
Odgovarajući: da
Ovisnosti: -
O šifri Jednostavan CSS.
O šifri Čista CSS Pac-Man paginacija s animacijom pri lebdenju.
O šifri Jednostavno responzivno označavanje stranica.
O šifri HTML i CSS paginacija.
O šifri Primjer označavanja stranica koji vam omogućuje kretanje između različitih stranica. Ovaj bi primjer morao imati href atribute kako bi radio sa stvarnom aplikacijom koja zahtijeva označavanje stranica.
O šifri Paginacija s CSS prilagođenim svojstvima.
Mogućnosti označavanja stranica i dizajna.
Izradio MojoM
25. svibnja 2017
Demo GIF: SVG Page Hopper
HTML, CSS i SVG stranica.
Izradio Chris Gannon
14. svibnja 2017
Demo GIF: beskonačna paginacija
Beskonačno označavanje stranica u HTML-u i CSS-u.
Napravio Mariusz Dabrowski
27. travnja 2017
O šifri CSS komponente: .
12 ideja za paginaciju web stranice pomoću HTML-a i CSS-a.
Izradila Rosa
3. studenog 2016
Demo GIF: Paginacija
Paginacija s HTML/CSS/JavaScript.
Izradio JP Nothard
9. listopada 2016
Demo GIF: Animacija paginacije pokazivačem miša
HTML i CSS paginacija lebdećom animacijom.
Izradila Elena Nazarova
12. rujna 2016
Paginacija s efektom lebdenja.
Izradio Andre Wichert
27. kolovoza 2016
Indikatori paginacije s HTML-om, CSS-om i JavaScriptom.
Izradio Moses Holmstrom
19. kolovoza 2016
Izradio Brendan Mullins
16. kolovoza 2016
Napravite čarobnu liniju za svoju paginaciju. Izgleda super.
Napravio Ryan Yu
18. veljače 2015
Responzivni, pristupačni eksperiment s alternativnim označavanjem stranica.
Izradio Simon Goellner
11. studenog 2014
Demo GIF: strelice za označavanje stranica
Savijajuće strelice za označavanje stranica.
Izradio Hakim El Hattab
18. listopada 2013
U ovom članku ćemo pogledati proces stvaranja takvog elementa web sučelja kao što je navigacijski blok za označavanje stranica. U Bootstrapu 3 i 4 ovaj element korisničkog sučelja implementiran je pomoću komponente Pagination.
Što je paginacija?Paginacija je prikaz podataka stranicu po stranicu. Oni. Ovo je vrsta izlaza kada se podaci ne izlaze odjednom, već u malim dijelovima (stranicama).
Za navigaciju kroz te dijelove (stranice) koristi se navigacijski blok.
Komponenta Pagination okvira Bootstrap je upravo dizajnirana za stvaranje ovog elementa sučelja, tj. navigacijski blok.
Izrada navigacijskog bloka za paginacijuU Bootstrapu 3, navigacijska traka ima sljedeću strukturu:
- Prethodno
- 1
- 2
- 3
- Sljedeći
Element nav u ovom fragmentu djeluje kao spremnik omotača. Potreban je u ovoj strukturi samo kako bi pomoćne tehnologije percipirale ovaj fragment HTML koda kao navigaciju.
Osim toga, preporučljivo je da pomoćne tehnologije također objasne o kakvoj se vrsti navigacijskog bloka radi. Ova radnja se provodi pomoću atributa aria-label.
Označavanje navigacijskog bloka za paginaciju u Bootstrapu vrši se pomoću popisa s grafičkim oznakama. Svaka navigacijska veza u ovom bloku je element omotan u li i smješten u ul.
Vizualni dizajn navigacijskog bloka u Bootstrapu napravljen je pomoću klase paginacije koja se mora dodati u ul.
Struktura navigacijskog bloka u Bootstrapu 4:
- Prethodno
- 1
- 2
- 3
- Sljedeći
Imajte na umu da u Bootstrapu 4 trebate dodati klase elementima li i a. K li je klasa stavke stranice, a k a je veza stranice. Ove klase postavljaju CSS stilove za elemente i neophodne su za ispravan prikaz navigacijskog bloka.
Korištenje ikona umjesto tekstualnih natpisaPrimjer navigacijske trake za paginaciju koja koristi ikone kao sadržaj nekih veza:
- Prvi
- « Prethodna
- 1
- 2
- 3
- " Sljedeći
- Posljednji
Promjena stanja navigacijske veze Promjena stanja poveznica u navigacijskoj traci vrši se korištenjem klasa disabled i active. Prva klasa (onemogućeno) koristi se za stvaranje neaktivne veze (na koju se ne može kliknuti). Druga klasa (aktivna) je potrebna za označavanje (označavanje) trenutne stranice. Morate dodati aktivne i onemogućene klase ne samoj vezi, već li elementu.
- Prethodno
- 1
- 2
- 3
- Sljedeći
- Prethodno
- 1
- 2
- 3
- Sljedeći
Onemogućena klasa postavlja veze na CSS deklaraciju pointer-events: none. Ovom objavom se želi onemogućiti funkcionalnost poveznice. Ali ne onemogućuje prijelaz na njega pomoću tipkovnice. Stoga, ako želite u potpunosti onemogućiti funkcionalnost takvih poveznica u svom projektu, potrebno ih je dodatno pratiti pomoću JavaScripta i dodati im atribut tabindex="-1".
Drugi način da onemogućite funkcionalnost veze je da ne koristite element a.
- Prethodno
- 1
- 2
- 3
- Sljedeći
U Bootstrapu 3 i 4 možete promijeniti veličinu navigacijskog bloka pomoću klasa pagination-lg i pagination-sm. To se postiže dodavanjem jedne od ovih klasa u klasu paginacije.
Prva klasa (pagination-lg) koristi se kada je potrebno povećati veličinu navigacije, a druga (pagination-sm) kada ju je potrebno smanjiti.
- Prethodno
- 1
- 2
- 3
- Sljedeći
- Prethodno
- 1
- 2
- 3
- Sljedeći
U Bootstrapu 3, poravnanje navigacijske trake za označavanje stranica vrši se pomoću klasa za poravnanje teksta.
U Bootstrapu 4, poravnanje navigacijske trake za označavanje stranica vrši se pomoću flex klasa.
Komponenta Pagera (Bootstrap 3)
Pager je Bootstrap 3 komponenta koja je dizajnirana za stvaranje jednostavne navigacije po stranicama ili drugom sadržaju stranice. Ova se komponenta sastoji od 2 gumba (veze).
Jedna od najčešćih upotreba ove navigacije je da vas prvi gumb odvede do više novi unos na mjestu, a drugi - starijem.
Sintaksa komponente dojavljivača:
- Prethodno
- Sljedeći
Prema zadanim postavkama, gumbi komponenti Pagera su centrirani. Ali osim ove opcije, Bootstrap 3 također vam omogućuje da ih poravnate duž različitih rubova. To se radi dodavanjem klase prethodno na prvi gumb, a pored drugog. Prethodna klasa poravnava vezu s lijeve strane, a sljedeća - s desne strane.
- Prethodno
- Sljedeći
Postavljanje gumba u onemogućeno stanje vrši se dodavanjem onesposobljene klase.
- ← Prethodna
- Dalje →
Web stranice obično sadrže nekoliko stranica. Mogu sadržavati 3-5 stranica, na primjer na odredišnoj stranici, ili možda više, puno više.
Svaka dobra web stranica trebala bi sadržavati navigaciju koja će korisniku omogućiti ispravnu navigaciju i kretanje između stranica stranice. Takvu paginaciju možete izraditi pomoću JavaScripta. U ovom članku ćemo govoriti o tome kako stvoriti takvu navigaciju.
Još nešto, uz obični JavaScript, primjer koristi Bootstrap 4. Njegova bootstrap komponenta za paginaciju kombinirana je s JQuery bibliotekom, odnosno posebnim Buzina Pagination pluginom. Omogućuje vam da podijelite sve informacije na nekoliko stranica s navigacijom između njih.
Povezivanje potrebnih okviraZa rad s Bootstrapom i JQueryjem morate ih povezati. To se može učiniti u vašem HTML dokument, koristeći oznake. Napravite 3 uparene oznake ;. Spojit ćemo Ajax.js, bootstrap 4 i sam JQuery plugin.
Da biste ispravno povezali bootstrap, također morate koristiti oznaku; u atributu href označavamo vezu na naš okvir. Sadržavat će poveznicu na stilove koje dodatak sadrži.
Dakle, povezali smo sve što je potrebno za rad. Ostalo je samo spojiti dodatak za izradu paginacije - Buzina Pagination. Da bismo ga stvorili, također stvaramo i oznake. U atribute "href" i "src" upisujemo isti link.
Dodaci Buzina Pagination i Bootstrap osim skripti sadrže i potrebne stilove. Spajamo ih preko oznake ;. Zapamtite - čak i ako dobro razumijete CSS, ne preporučujemo da idete i mijenjate postavke dodatka. Samo iz zabave, možete ih otvoriti u uređivaču koda i pogledati, ali prvo spremite originalnu verziju koda.
Vaš HTML dokument treba sadržavati sljedeći kod:
Paginacija za web mjesto pomoću jQueryja: Bootstrap 4 .container ( margina: 150px auto; ) Izgled stranice. HTML U svim našim člancima promatrali smo stvaranje 1 HTML stranice, u istom primjeru kreirat ćemo ih nekoliko odjednom, kroz jedan dokument. Pritom ih nećemo postavljati na različite poveznice, već će im se pristupiti klikom na gumb. Za svaku stranicu izradit ćemo zaseban blok.
U našem primjeru stvaramo ukupno 5 stranica. Napravite zasebnu za svaku od njih div blok. Unutra možete napisati neki tekst za vizualni prikaz. Ako želite, možete izraditi 10, 20 i 30 stranica.
Za rad s njima ne trebaju vam klase ili identifikatori. Glavna stvar je da se sve te stranice nalaze unutar glavnog bloka s primjerom klase.
JQuery funkcije Morate povezati nekoliko funkcija:
Zaključak 
Završili smo izradu paginacije. Na kraju, što smo dobili? Imamo dobro oblikovanu navigaciju koja će savršeno odgovarati vašoj web stranici. Dodajte nekoliko elemenata i možete ga prilagoditi stranicama koje imate.
Skripte možete mijenjati kako želite, ali samo ako dobro poznajete JavaScript. Glavna stvar je ne mijenjati vrijednosti skripti i stilova dodataka.
Ova paginacija ima veliku prednost - jednostavnost korištenja. Korisnik neće morati učitavati dodatne poveznice za navigaciju između stranica.
Štoviše, zbog malog broja korištenih skripti, optimizacija neće biti znatno smanjena.
Oznake:Paginacija, ili ako je popprost - navigacija po stranici, važan je element svake manje-više cjelovite web stranice. Razni sustavi Sustavi za upravljanje stranicama većinom imaju ugrađene alate za implementaciju paginacije. Također postoji mnogo zasebnih dodataka napisanih za ovaj koristan zadatak; u većini slučajeva izgrađeni su pomoću . Svi ovi dodaci razlikuju se i po stilu i po načinu izvođenja funkcionalnost, ali glavna stvar je da su izvrsna alternativa implementaciji na strani poslužitelja razbijanja voluminoznog sadržaja web stranica na stranice.
Nudim na razmatranje, po mom mišljenju, jedan od najlakših jQuery dodaci, za stvaranje navigacija stranicom, koji će vam pomoći organizirati, atraktivno i brzo paginiranje.
Vrlo lagan u svim pogledima, kako po težini tako i po svemu što se tiče povezivanja, postavki, brz za kreiranje paginacije, opremljen s tri stila dizajna i nabijen podrškom.
Usput, ako niste zadovoljni standardnim stilovima, možete koristiti, što neće biti teško priložiti .css dodatka.
Sada pobliže pogledajmo kako ispravno povezati sam dodatak i stilsku datoteku s dokumentom, odnosno izravno ga implementirati na stranice web mjesta i proći kroz dostupne postavke dodatka.
Za početak, naravno, morate imati dodatak, odnosno sa izvorima, u koje ste pažljivo upakirani jquery javascript i css stilsku datoteku.
Pogledajmo korak po korak kako koristiti dodatak:
U tijelu stranice, u odjeljku ..., trebate povezati jQuery framework, po mogućnosti verziju 1.7.2 ili noviju, to možete učiniti pomoću posebnog Google repozitorija:
Ako već imate jQuery omogućen na svojoj web stranici i radite punom brzinom, možete sigurno preskočiti sve gore opisane pokrete, glavna stvar je osigurati da jQuery verzija nije pregusta. Usput, u WordPressu je to u redu.
Dalje, povezujemo naše radni konj- jquery.simplePagination.js dodatak:
Ne morate se mučiti oko toga, već jednostavno odaberite stil koji vam je potreban, svijetli, tamni ili kompaktni, i zalijepite skup pravila u datoteku styles.css vašeg predloška. Registracija vlastitih stilova ili korištenje Bootstrapa također je opcija, u smislu originalnosti i razvoja vještina izgradnje web stranica, čak i poželjnija.
Za prikaz navigacijske ploče stranice na stranicama web-mjesta, gdje je planirate postaviti, logičnije i najčešće, to je na dnu glavnog sadržaja, trebali biste napisati sljedeće:
Za svijetlu pozadinu:
Kompaktna tema:
$(function() ( $(#light-pagination).pagination(( items: 100, itemsOnPage: 10, cssStyle: "light-theme" )); ));
U primjeru sam koristio inicijalizaciju za paginaciju svijetle teme #light-pagination , možete promijeniti selektor na drugi, za kompaktno je to #compact-pagination , ili za tamni stil #dark-pagination . U tom slučaju ne zaboravite promijeniti klasu u funkciji cssStyle.
Kao što sam već napisao gore, dodatak je vrlo fleksibilan u postavkama, sljedeće opcije su dostupne za promjenu:
- stavke — Ukupan broj stavki koje će se koristiti za izračun stranica. Zadano: 1.
- itemsOnPage — Broj stavki za prikaz na svakoj stranici. Zadano: 1.
- stranice — izborno. Ako je navedena vrijednost, stavke i opcije itemsOnPage se zanemaruju. Postavlja broj stranica na popisu.
- displayedPages — Koliko bi brojeva stranica trebalo biti vidljivo tijekom navigacije. Minimum dopuštena vrijednost: 3, zadano: 5.
- rubovi — Koliko je brojeva stranica vidljivo na početku i kraju numeracije. Zadana vrijednost: 2.
- currentPage — Koja će stranica biti odabrana odmah nakon pokretanja. Logična, zadana vrijednost: 1.
- hrefTextPrefix - niz koji se koristi u atributu HREF dodaje se prije broja stranice. Zadano: "#stranica- ".
- hrefTextSuffix — Niz koji se koristi u atributu HREF umeće se nakon broja stranice. Zadana vrijednost je prazan niz.
- prevText — Tekst gumba za prethodnu stranicu. Zadano: "Prethodno".
- nextText — Tekst gumba uključen sljedeća stranica. Zadano: "Dalje"
- cssStyle — Definirajte CSS stil. Zadano: "light-theme"
- selectOnClick - Odabir stranice nakon klika, prema zadanim postavkama - omogućeno (true), još uvijek ne razumijem zašto to onemogućiti, ali postoji takva opcija, vrijednost: "false".
Pogledali smo najosnovnije postavke. OKO dodatne funkcije i dostupne metode za korištenje ovog dodatka, možete saznati proučavanjem dokumentacije izravno na stranici razvojnog programera.
Sve što mogu učiniti je poželjeti vam puno sreće i uspjeha u radu na vašim novim projektima.
Dovoljno je označavanje stranica, uključujući navigaciju po stranici jednostavna stvar, no početnici često imaju problema s njegovom izradom i što je najvažnije s razumijevanjem njezina rada...
Jedna od zadaća paginacije je istovremeni izlaz ne svih elemenata, već ograničenog broja njih, recimo ne više od $pp elemenata, a koja se grupa elemenata ispisuje ovisi o ulaznom parametru $pn - broju ovu grupu. Ovaj broj je, zapravo, broj stranice. Ovdje vam treba ovakav upit:
ODABERITE * IZ OGRANIČENJA `tablice` (($pn-1)*$pp),($pp)
Vrijednost $pn smanjuje se za 1 tako da se npr. za prvu stranicu liste s vrijednošću $pp jednakom 10 biraju elementi od 0 do 9, a ne od 10 do 19. Naravno, ako stranice su numerirane od nule, vrijednost $ je smanjena za 1 pn nije potreban u zahtjevu.
Da biste riješili sljedeći problem, naime izgradnju navigacije stranicama, prvo trebate znati ukupan broj stranica na popisu. Da biste to učinili, prvo možete postaviti upit o ukupnom broju elemenata. Ili, izravno u upitu, izračunajte ukupan broj stranica na temelju ukupnog broja elemenata:
SELECT FLOOR((COUNT(*)+($pp-1))/($pp)) IZ `tablice`
Da biste dobili ukupan broj stranica $pc, ovdje se koristi prilično dobro poznata formula $pc=(count+per_page-1) div per_page, ali prilagođena za korištenje funkcije FLOOR umjesto cjelobrojnog dijeljenja (div). Također možete koristiti DIV operator, koji je već duže vrijeme podržan u MySQL-u.
Ako trebate prikazati samo jedan element po stranici, gornji upiti mogu se pojednostaviti.
Nakon što se dobije ukupan broj stranica $pc, možete odmah prikazati veze na sve stranice popisa pomoću petlje s brojačem u rasponu od 1 do $pc , međutim, obično se koristi sofisticiranija navigacija, u kojoj veze da se sve stranice ne prikazuju istovremeno, već samo stranice s brojevima u ograničenom rasponu ovisno o trenutnom broju stranice. Na primjer, ovdje su formule za dobivanje vrijednosti koje ograničavaju raspon $first i $last za takozvanu bankovnu navigaciju:
$prvi=$pn-1-($pn-2)%$raspon; $last=$first+$range$pc) error(404); elseif ($result=mysqli_query($link,"SELECT * FROM `table` LIMIT ".(($pn-1)*$pp).",".$pp)) ( $range=6; $first=$ pn-1-($pn-2)%$raspon; $posljednji=$prvi+$raspon>