V tomto článku zvážte proces vytvárania takéhoto prvku webového rozhrania ako navigačného bloku pre paginácie. V bootstrap 3 a 4 sa tento prvok rozhrania implementuje pomocou paginačnej zložky.

Čo je stránkovanie?

Papaginácia je výstup údajov. Tí. Toto je záver, keď sú údaje výstup nie všetko hneď, ale v malých častiach (stránky).

Pre pohyb v týchto častiach (stránky) sa používa navigačný blok.

Rámcová zložka bootstrap rámca bootstrap je určený len na vytvorenie tohto prvku rozhrania, t.j. navigačný blok.

Vytvorenie navigačného bloku pre stránkovanie

V bootstrap 3 má navigačnú jednotku nasledujúcu štruktúru:

Prvok NAV v tomto fragmente hrá úlohu vyhraného kontajnera. V tejto štruktúre je potrebné len na pomocné technológie vnímali tento fragment HTML kód ako navigáciu.

Okrem toho sú pomocné technológie žiaduce vysvetliť, aký druh navigačného bloku. Táto akcia vykonáva atribút ARIA-label.

Označenie navigačného bloku pre stránkovanie v bootstrap sa vykonáva pomocou označený zoznam. Každá navigačná informácia v tomto bloku je prvok A, zabalený v LI a umiestnený v ul.

Vizuálny dizajn navigačného bloku v bootstrap sa vykonáva pomocou stránky stránok, ktorú chcete pridať do ul.

Štruktúra navigačného bloku v bootstrap 4:

Upozorňujeme, že v bootstrap 4 na prvky Li a A, musíte pridať triedy. Na položku stránky Li - triedy a na odkaz na stránku. Tieto triedy nastavujú štýly CSS na prvky a sú potrebné pre správne zobrazenie navigačného bloku.

Použite namiesto textových inzercií ikon alebo ikon

Príklad navigačného panelu pre stránkovanie, v ktorých sa ikony používajú ako obsah ako obsah:

Zmena stavu navigačného prepojenia

Zmeny v stave odkazov na navigačnom paneli sa vykonáva pomocou zakázaných a aktívnych tried. Prvá trieda (zakázaná) sa používa na vytvorenie aktívneho (nie clichel) referencie. Na zvýraznenie (pokyny) sa vyžaduje druhá trieda (aktívna) aktuálna stránka. Pridajte aktívne a zakázané triedy, ktoré nie sú na samotnom spojení, ale k prvku Li.

Zakázaná trieda nastaví prepojenia CSS na udalosti ukazovateľa: Žiadne. Táto reklama je určená na vypnutie referenčnej funkcie. Ale nevypne prechod na neho pomocou klávesnice. Preto, ak chcete úplne vypnúť funkčnosť takýchto odkazov vo vašom projekte, musíte ich dodatočne sledovať s JavaScriptom a pridať ich kartón \u003d "- 1" atribút.

Ďalším spôsobom, ako vypnúť funkčnosť prepojenia nepoužívajte položku A.

Zmena veľkosti navigačného bloku

V BOOTSTRAPE 3 A 4, môžete zmeniť veľkosť navigačného bloku pomocou stránok stránok-LG a pagination-SM. To sa vykonáva pridaním jednej z týchto tried do triedy stránok.

Prvá trieda (PAGINATION-LG) sa používa, keď je potrebné zvýšiť veľkosť navigácie a druhý (stránok - SM) - kedy sa má znížiť.

Zarovnanie navigačného bloku

Bootstrap 3 Zarovnanie navigačného panelu pre stránkovanie sa vykonáva pomocou triedy pre vyrovnanie textu.

V bootstrap 4 sa zarovnanie navigačného panelu pre stránkovanie uskutočňuje pomocou Flex tried.

Pager Component (Bootstrap 3)

Pager je komponent bootstrap 3, ktorý je navrhnutý tak, aby vytvoril jednoduchú navigáciu prostredníctvom stránok alebo iných materiálov. Táto zložka je 2 tlačidlá (odkazy).

Jednou z najbežnejších možností používania tejto navigácie je, aby to tak, že prvé tlačidlo prenesené do novšej zápisu na stránke a druhý na starší.

Syntax komponentu Pager:

Zmena umiestnenia tlačidiel

Predvolené, tlačidlá Pager Component zarovnaté v strede. Ale okrem tejto možnosti im Bootstrap 3 umožňuje byť zarovnané na rôznych okrajoch. Toto sa vykonáva pridaním do prvého tlačidla triedy Prelios a druhý - Ďalej. Predchádzajúca trieda zarovnanie odkazu na ľavú hranu a ďalšie je správne.

Odpojte funkčnosť tlačidla

Preklad tlačidla na odpojený stav sa vykonáva pridaním zakázanej triedy k nemu.

Papaginácia a ak PopTost je navigácia stránky, dôležitý prvok akéhokoľvek malého miesta. Rôzne systémy riadenia stránok, z väčšej časti, majú vstavané nástroje na implementáciu stránkovania. K dispozícii je tiež hmotnosť jednotlivých plug-inov písaných do tohto užitočného prípadu, vo väčšine prípadov sú vybudované pomocou knižnice. Všetky tieto pluginy, rôzne a výkonné štýl a na funkčnosti, ale čo je najdôležitejšie, všetky z nich sú vynikajúcou alternatívou k serveru implementácii rozpadu objemu obsahu na stránkach.

Navrhujem, aby som posúdil, podľa môjho názoru jeden z najjednoduchších pluginov JQuery, vytvoriť navigáciu stránky, ktorá vám pomôže organizovať, atraktívne a rýchlo číslovanie stránok.

Veľmi svetlo, vo všetkých ohľadoch a hmotnosti a všetko sa týka pripojenie, nastavenia, Frisky, aby vytvorili číslovanie stránok, vybavené tromi štýlmi dizajnu a účtované na podporu.

Mimochodom, ak neurobíte štandardné štýly, môžete použiť, že nebude dobrá práca na upevnenie .css zapojiť.

Pozrime sa podrobnejšie, ako pripojiť samotný plugin a súbor štýlu do dokumentu správne, potom ho priamo implementuje na stránkach stránok a prejdite cez dostupné nastavenia plug-in.

Ak chcete začať,, samozrejme, musíte mať plugin, to znamená, že so zdrojom, ktorý je starostlivo zabalený jQuery javascript a súbor štýlu CSS.

Budeme analyzovať krok za krokom, ako používať plugin:

Krok 1. Pripojenie jQuery

V tele stránky v sekcii ... Musíte pripojiť rámec JQuery, najlepšie verzia 1.7.2, alebo viac ako čerstvé, možno ho vykonať pomocou špeciálneho skladovania Google:

Ak ste už zahrnuli na webovej stránke JQuery, funguje všetko, čo je popísané vyššie, môžete bezpečne preskočiť, hlavnou vecou je zabezpečiť, aby verzia JQuery nie je príliš hustá. Mimochodom, všetko je v poriadku.
Ďalej pripojujeme náš pracovný pás - plugin jquery.simplepagination.js.:

Nemôžete radi ako záhrada, ale jednoducho vyberte štýl, ktorý chcete, ľahké, tmavé alebo kompaktné a vložte súbor pravidiel v štýle File.cs vašu šablónu. Predpísať svoje vlastné štýly alebo využiť Bootstrap, Tiež možnosť, pokiaľ ide o originalitu a rozvoj webových stránok zručností, ešte viac.

Krok 3. HTML

Ak chcete priviesť navigačný panel stránky na stránkach stránok, kde plánujete umiestniť ho, logické a najčastejšie, je to nižší hlavný obsah, mali by ste zaregistrovať nasledovné:
Pre ľahké pozadie:

Kompaktná téma:

$ (Funkcia () ($ (# light-pagination) .Pagination (Položky: 100, položiekOnPage: 10, CSSstyle: "Light-theme")););

V príklade som použil inicializáciu na stránkovanie s svetelnými krokmi # svetelným pagination, môžete zmeniť volič na druhý, pre kompaktné IT # Kompaktné pagination, alebo pre tmavý štýl # tmavospráv. Nezabudnite zmeniť a triedu vo funkcii cssstyle.
Už som už napísal, plugin je v nastaveniach veľmi flexibilný, na zmenu sú k dispozícii nasledujúce možnosti:

• položky. - celkový počet položiek, ktoré sa použijú na výpočet stránok. Predvolené: 1 .
• položiek. - počet položiek zobrazených na každej stránke. Predvolené: 1 .
• stránka - Voliteľné. Ak je zadaná hodnota, položky a možnosti položiek a položiek sa ignorujú. Nastaví počet stránok v zozname.
• zobrazené. - Koľko strán by ste mali vidieť počas navigácie. Minimálna prípustná hodnota: 3 , Predvolené: 5 .
• hrany. - Koľko strán je vidieť na začiatku a na konci číslovania. V predvolenom nastavení je hodnota: 2 .
• aktuálna stránka. - Ktorá stránka sa vyberie ihneď po spustení. Logická, predvolená hodnota: 1 .
• hreftextprefix. - String používaný v atribúte HREF sa pridá pred číslom stránky. Predvolené: "# Strana-".
• hreftextSuffix. - Reťazec použitý v atribúte HREF sa zapadne za číslom stránky. Štandardne, prázdny reťazec.
• prevtext. - Tlačidlo textu na predchádzajúcu stránku. Predvolené: "Prev".
• nEXTTEXT. - Tlačidlo Tlačidlo na nasledujúcu stránku. Predvolené: "Ďalšie"
• cssstyle - Určite štýl CSS. Predvolené: "Light-theme"
• selectonclick. - Výber stránky po kliknutí, podľa predvolených nastavení - povolené ( pravda.), prečo vypnúť a nerozumel, ale táto možnosť je hodnota: "False".

Prehodnotili sme najzákladnejšie nastavenia. Dokumentáciu môžete zistiť priamo na stránke Developer Studingom ďalších funkcií a prístupných metód použitia tohto pluginu.

Prajem vám len vám veľa šťastia a úspechu vo vašej práci na vašich nových projektoch.

Papaginácia, vrátane navigácie na stránkach, je pomerne jednoduchá vec, ale začiatočníci majú často problémy s jeho stvorením, a čo je najdôležitejšie, pochopenie jej práce ...

Jednou z úloh PageTination je simultánny výstup nie všetky prvky a ich obmedzené číslo, hovoria, že nie viac ako $ pp prvky, a ktorá skupina prvkov sa zobrazí, závisí od vstupného parametra $ PN - čísla tejto skupiny . Toto číslo je v skutočnosti číslo stránky. To si vyžaduje takúto požiadavku:

Vyberte * z `tabuľky" (($ PN-1) * $ pp), ($ pp)

Hodnota $ PN klesá na 1, takže napríklad pre prvú stránku zoznamu s hodnotou $ PP 10 boli prvky vybrané od 0 do 9, a nie od 10 do 19. Prirodzene, ak sú stránky Číslované z nuly, zníženie o 1 hodnotou $ pn nie je potrebné požadovať.

Ak chcete vyriešiť nasledujúcu úlohu, menovite budovanie navigácie prostredníctvom stránok, po prvé, musíte poznať celkový počet stránok zoznamu. Ak to chcete urobiť, môžete najprv požadovať celkový počet položiek. Alebo priamo v dotaze vypočítajte celkový počet strán založených na celkovom počte položiek:

Vyberte podlahu ((počet (*) + ($ pp-1)) / ($ pp)) z `tabuľky"

Ak chcete získať celkový počet PCS $ PC, dostatočne dobre známy vzorec $ PC \u003d (počet + per_page-1) DIV PER_PAGE sa tu používa, ale upravené na použitie funkcie podlahy namiesto celočíselnej divízie (div). Môžete použiť prevádzkovateľ DIV, ktorý je podporovaný v MySQL na dlhú dobu.

Ak na stránkach potrebujete na zobrazenie iba jedného prvku, vyššie uvedené požiadavky možno zjednodušiť.

Po celkovom počte PCS $ PC sa získa, môžete okamžite zobraziť odkazy na všetky stránky zoznamu pomocou cyklu s metrom v rozsahu od 1 do $ PC, ale zvyčajne používajú viac rafinovanú navigáciu, pri ktorej sú odkazy súčasne zobrazené a len na stránkach s číslami, ktoré sú obmedzené na číslo aktuálneho rozsahu stránok. Napríklad tu sú vzorce pre získanie limitujúceho rozsahu $ prvý a posledných hodnôt $ pre takzvanú bankovú navigáciu:

$ prvý \u003d $ PN-1 - ($ PN-2)% $ RANGE; $ Last \u003d $ prvý + $ rad<$pc?$first+$range:$pc;

V $ RANGE musíte dať hodnotu 1 menej ako požadovaný šírku rozsahu, napríklad na výstupe Nie viac ako sedem pravidelných odkazov na stránky s rozsahom je potrebné umiestniť 6. Ak zlúčíte všetky vyššie uvedené napísané, bude obrátiť von:

$ pp \u003d 10; Ak ($ výsledok \u003d mysqli_query ($ link ", vyberte podlahu ((počet (*) +". ($ PP-1). ") /". $ pp. ") z` tabuľky")) (Zoznam ($ PC) \u003d Mysqli_fetch_ROW ($ výsledok); mysqli_free_result ($ výsledok); // tu môžete umiestniť rotátor stránok stránok 0 a 1, ak ($ \u200b\u200bPn \u003d\u003d 0 || $ PN\u003e $ PC PC) Chyba (404 ); Elseif ($ výsledok \u003d mysqli_query ($ link, "vyberte * z` tabuľky "limit". (($ PN-1) * $ pp). "," $ pp)) ($ range \u003d 6; $ prvý \u003d $ PN-1- ($ PN-2)% $ RANGE; $ Last \u003d $ First + $ Range<$pc?$first+$range:$pc; } else error(503); } else error(503);

Zostáva len na zobrazenie navigačného reťazca:

V prezentovanej implementácii prvé pravidelné prepojenie (ak to nie je odkaz na prvú stránku), vám umožňuje prepínať na predchádzajúcu stránku stránok. Ak sa vyžaduje, aby sa posledné pravidelné prepojenie mohlo byť prepínať aj na nasledujúcu stránku stránok (to znamená, že to fungovalo ako odkaz "aj" a mohol by ho nahradiť), v prvom vzorci ako delič namiesto sortimentu $ Variabilná, zadajte výraz ($ Range-1).

Funkcia PageLink je zodpovedná za vytvorenie časti odkazu, v ktorom je číslo stránky špecifikované. Pri použití rotátora stránok 0 a 1 je táto funkcia lepšie umiestniť vedľa rotátora, pretože Musí kompenzovať akciu rotátora, čo vám umožní získať adresu / namiesto /? P \u003d 1 v spojení, aby ste ho zhodovali s nulou hodnotu vstupného parametra $ PN:

Funkcia PageLink ($ p) (návrat $ p\u003e 1? "? P \u003d". $ P: "";) IF ($ PN \u003d\u003d 0) $ PN ++; indeif ($ pn \u003d\u003d 1) $ Pn--;

C Ollection of Free Paginácie HTML a CSS Príklady kódov: reagujúci, jednoduchý, materiálový dizajn, navigačné bodky, atď. Aktualizácia zberu júna 2018. 5 nových položiek.

Súvisiace články.

O kódexe.

Odpoveď Paginácie / Pager v HTML a CSS. Zmena veľkosti svojho prehliadača zobrazíte zaujímavý efekt.

Reagovať: Áno.

Závislosti: bootstrap.cs

O kódexe.

Riadok sledovať stránkovanie.

CSS line sledovať stránkovanie.

Reagovať: Áno.

Závislosti: -

O kódexe.

Paginačné tlačidlá

Pure CSS paginačné tlačidlá.

Kompatibilné prehliadače: Chrome, Firefox, Opera, Safari

Reagovať: Áno.

Závislosti: -

O kódexe.

Odstraňovanie čiary s hoverom

Čisté CSS Line Paginácie s vznášadlom.

Kompatibilné prehliadače: Chrome, Edge, Firefox, Opera, Safari

Reagovať: Áno.

Závislosti: -

O kódexe.

Pacman

Animácia stránok s HTML, CSS a JS.

Kompatibilné prehliadače: Chrome, Edge, Firefox, Opera, Safari

Reagovať: Áno.

Závislosti: -

O kódexe.

Jednoduché CSS.

O kódexe.

Čistý CSS Pac-Man Paginácia S animáciou na Hover.

O kódexe.

Jednoduché citlivé paginácie.

O kódexe.

Paginácie HTML a CSS.

O kódexe.

Príklad stránkovania, ktorý vám umožní navigovať medzi rôznymi stranami. Tento príklad by musel mať atribúty HREF s cieľom pracovať s aktuálnou aplikáciou, ktorá vyžaduje stránkovanie.

O kódexe.

Paginácie vlastnými vlastnosťami CSS.

Možnosti paginácie a návrhy.
Mojom
25. mája 2017

Demo GIF: Svg strana Hopper

HTML, CSS a SVG Stránka.
Vyrobené Chris Gannon
14. mája 2017

Demo GIF: Nekonečné paginácie

Nekonečné paginácie v HTML a CSS.
Vyrobené Mariusz Dabrowski
27. apríl 2017

O kódexe.

Komponenty CSS :.

12 nápadov na stránke webových stránok pomocou HTML a CSS.
Rosa.
3. novembra 2016

Demo GIF: Paginácie

Paginácie s HTML / CSS / Javascript.
Vyrobené JP Nothard
9. októbra 2016

Demo GIF: Pagination Hover Animácia

HTML a CSS pagination hover animácie.
Vyrobené Elena Nazarova
12. septembra 2016

Paginácie s vznášadlom.
Vyrobené Andre Wichert
27. august 2016

Indikátory pagination s HTML, CSS a Javascript.
Vyrobené Moses Holmström
19. augusta 2016

Vyrobené Brendan Mullins
16. august 2016

Responzívna Magic Line Paginácia

Vytvorte magickú čiaru pre vaše paginácie. Vyzerá to úžasne.
Ryan Yu
18. februára 2015

Reagujúci, prístupný, alternatívny sprievodný experiment.
Urobil Simon Goellner
11. novembra 2014

Demo GIF: Paginačné šípky

Ohýbanie stránkových šípok.
Vyrobené HAKIM EL HOATTAB
18. október 2013

Miesta majú tendenciu obsahovať niekoľko stránok. Môžu byť umiestnené ako 3-5 strán, napríklad na pristávacej stránke, a možno viac, oveľa viac.

Každé dobré miesto musí obsahovať navigáciu, ktorá umožní užívateľovi správnemu navigovať a pohybovať medzi stránkami stránok. Takéto stránkovanie môžete vytvoriť pomocou Javascriptu. V tomto článku budeme hovoriť o tom, ako vytvoriť takúto navigáciu.

Ďalším bodom, okrem obyčajného JavaScriptu, príklad používa BOOTSTRAP 4. Jeho komponent bootstrap pagination je kombinovaný s knižnicou JQuery, a to buzina Pagination Plugin. To vám umožní rozdeliť všetky informácie do niekoľkých strán s vytvorením navigácie medzi nimi.

Pripojenie potrebných rámcov

Ak chcete pracovať s bootstrap a jquery, musíte sa pripojiť. Toto je možné vykonať vo vašom dokumente HTML pomocou tagov