A lapozás, és ha a poptrosta - az oldalszámozás, minden többé-kevésbé megtelt oldal fontos eleme. Különféle rendszerek A webhelykezelés többnyire beépített eszközökkel rendelkezik a lapozás megvalósításához. Ehhez a hasznos dologhoz nagyon sok külön plugin is íródott, a legtöbb esetben a . Mindezek a beépülő modulok, mind a végrehajtási stílusban, mind a beépítésben különböznek funkcionalitás, de ami a legfontosabb, mindegyik, ez egy nagyszerű alternatíva a webhelyek tömeges tartalmának oldalszámozásának szerveroldali megvalósításához.

Véleményem szerint az egyik legegyszerűbbet javaslom megfontolásra jQuery bővítmények, oldalszámozás létrehozásához, amely segít a rendszerezésben, vonzó és gyors lapozásban.

Nagyon könnyű, minden tekintetben és súlyban, és minden, ami a csatlakozásról, beállításokról, lapozás létrehozásához szükséges, három dizájnstílussal kiegészítve, és tele van támogatással.

Egyébként, ha nem vagy elégedett a standard stílusokkal, használhatod a -t, amit nem lesz nehéz becsavarni .css csatlakoztat.

Most nézzük meg közelebbről, hogyan kell magát a beépülő modult és a stílusfájlt helyesen csatlakoztatni a dokumentumhoz, azaz közvetlenül beágyazni a webhely oldalaira, és menjen át a rendelkezésre álló bővítménybeállításokon.

Először természetesen szükségünk van egy pluginre, vagyis a forráskódra, amelyben a jquery javascriptés css stílusú fájl.

Nézzük meg lépésről lépésre, hogyan kell használni a bővítményt:

1. lépés Beleértve a jQuery-t

Az oldal törzsében a szakaszban ... csatlakoztatnia kell a jQuery keretrendszert, lehetőleg az 1.7.2-es vagy újabb verziót, ezt egy speciális Google-tárral teheti meg:

Ha az oldaladon már engedélyezve van a jQuery, és az may and main-el működik, nyugodtan kihagyhatod az összes fent leírt gesztust, a lényeg, hogy ne legyen túl sűrű a jQuery verzió. A WordPressben egyébként ez rendben van.
Ezután csatlakoztatjuk az igáslónkat - a bővítményt jquery.simplePagination.js:

Nem kerítheti be a kertet, egyszerűen válassza ki a kívánt stílust, legyen világos, sötét vagy kompakt, és helyezze be a szabálykészletet a sablon .css fájljába. Írja meg saját stílusait vagy használja Bootstrap, szintén lehetőség, az eredetiség és a teleképítési készségek fejlesztése szempontjából még előnyösebb.

3. lépés HTML

A lapozási sáv megjelenítéséhez a webhely azon oldalain, ahol el szeretné helyezni, logikusabb és leggyakrabban ez a fő tartalom alján található, írja be a következőket:
Világos háttérhez:

Kompakt téma:

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

A példában a világos téma lapozáshoz a #light-pagination inicializálást használtam, de a választót átváltoztathatod másikra is, kompaktnál ez #compact-pagination , vagy sötét stílusnál #sötét lapozás . Ebben az esetben ne felejtse el megváltoztatni az osztályt a függvényben css stílusban.
Ahogy fentebb is írtam, a plugin nagyon rugalmas a beállításokban, a következő lehetőségek állnak rendelkezésre a változtatásra:

• tételeket- Az oldalak kiszámításához felhasznált elemek teljes száma. Alapértelmezett: 1 .
• itemsOnPage- Az egyes oldalakon megjelenő elemek száma. Alapértelmezett: 1 .
• oldalakat- Választható. Érték megadása esetén az elemek és az itemsOnPage beállítások figyelmen kívül maradnak. Beállítja a lista oldalainak számát.
• megjelenített oldalak- Hány oldalszám legyen látható a navigáció során. Minimális megengedett érték: 3 , alapértelmezett: 5 .
• élek— Hány oldalszám látható a számozás elején és végén. Alapértelmezett érték: 2 .
• aktuális oldal- Melyik oldal kerül kiválasztásra közvetlenül az indítás után. Logikusan az alapértelmezett érték: 1 .
• hrefTextPrefix- A HREF attribútumban használt karakterlánc hozzáadódik az oldalszám elé. Alapértelmezett: "#oldal".
• hrefTextSuffix- A HREF attribútumban használt karakterlánc az oldalszám után kerül beszúrásra. Az alapértelmezett egy üres karakterlánc.
• prevText— Gombszöveg az előző oldalra. Alapértelmezett: "előző".
• következőSzöveg— Gombszöveg a következő oldalhoz. Alapértelmezett: Következő
• css stílusban— Határozd meg css stílusban. Alapértelmezett: "könnyű téma"
• válassza az OnClick lehetőséget- Oldal kiválasztása kattintás után, alapértelmezés szerint - engedélyezve ( igaz), nem értettem, miért kell letiltani, de van ilyen lehetőség, az érték „false”.

A legalapvetőbb beállításokkal foglalkoztunk. O további jellemzőkés elérhető módszerek Megtudhatja, hogyan kell használni ezt a bővítményt, ha elolvassa a dokumentációt közvetlenül a fejlesztői oldalon.

Már csak az marad, hogy sok szerencsét és sikert kívánjak az új projektjeihez.

A lapozás, beleértve a navigációt is, meglehetősen egyszerű dolog, de a kezdőknek gyakran gondot okoz az elkészítése, és ami a legfontosabb, hogy megértsék a működését...

A lapozás egyik feladata nem minden elem egyidejű megjelenítése, hanem korlátozott számban, mondjuk legfeljebb $pp elemben, és attól függ, hogy melyik elemcsoport jelenik meg. bemeneti paraméter$pn ennek a csoportnak a számai. Ez a szám valójában az oldalszám. Íme egy ehhez hasonló kérés:

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

A $pn értéke 1-gyel csökken, így például egy 10-es $pp értékű lista első oldalán a 0-tól 9-ig terjedő elemek kerülnek kiválasztásra, nem pedig 10-től 19-ig. ha az oldalak nullától kezdődően vannak számozva, akkor a $ értékének 1 pn-nel történő csökkentése nem szükséges a kérésben.

A következő probléma megoldásához, nevezetesen az oldalnavigáció felépítéséhez, mindenekelőtt ismernie kell a listában szereplő összes oldal számát. Ehhez először lekérdezheti az elemek teljes számát. Vagy közvetlenül a lekérdezésben számítsa ki az oldalak teljes számát az elemek teljes száma alapján:

SZEMLE VÁLASZTÁSA((SZÁM(*)+($pp-1))/($pp)) „táblázatból”

A $pc teljes oldalszám meghatározásához itt a jól ismert $pc=(count+per_page-1) div per_page formulát használjuk, de az egész osztás (div) helyett a FLOOR függvény használatához igazítva. Használhatja a DIV operátort is, amelyet a MySQL már régóta támogat.

Ha oldalanként csak egy elemet kell megjeleníteni, a fenti lekérdezések leegyszerűsíthetők.

Miután megérkezett a teljes oldalszám $pc, azonnal megjelenítheti a lista összes oldalára mutató hivatkozásokat, ha egy számlálóval 1 és $pc közötti tartományban hurkolja azokat az oldalakat, amelyek száma korlátozott számtól függően aktuális oldal hatótávolság. Például itt vannak a képletek a $first és $last tartománykorlátozó értékeinek lekéréséhez az úgynevezett banki navigációhoz:

$első=$pn-1-($pn-2)%$tartomány; $utolsó=$első+$tartomány<$pc?$first+$range:$pc;

A $tartományban a szükséges tartományszélességnél 1-gyel kisebb értéket kell megadnia, például ahhoz, hogy legfeljebb hét normál link jelenjen meg az oldalakon, a 6-os értéket kell megadnia a $tartományba. Ha a fent leírtakat kombinálja, így fog kinézni:

$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); // helyezze el ide a 0 és 1 oldalszámú rotátort if ($pn==0||$pn>$pc) error(404); elseif ($result =mysqli_query($link,"SELECT * FROM `table` LIMIT ".(($pn-1)*$pp).",".$pp)) ( $tartomány=6; $első=$pn-1- ($pn-2)%$tartomány;$utolsó=$első+$tartomány<$pc?$first+$range:$pc; } else error(503); } else error(503);

Már csak a navigációs sáv megjelenítése marad:

A bemutatott megvalósításban az első normál hivatkozás (ha nem az első oldalra mutató hivatkozás) lehetővé teszi az előző oldalbankba való váltást. Ha azt szeretné, hogy az utolsó reguláris hivatkozás is lehetővé tegye a következő oldalbankra való váltást (vagyis a „Továbbiak” hivatkozáshoz hasonlóan működik, és helyettesítheti azt), akkor megadhatja a ($tartomány-1) kifejezést a az első képlet osztóként a $tartomány változó helyett.

Az oldalhivatkozás funkció feladata a hivatkozás azon részének generálása, amely meghatározza az oldalszámot. A 0 és 1 oldalszámforgató használatakor ezt a funkciót a legjobban a forgató mellé helyezni, mert kompenzálnia kell a forgató hatását, lehetővé téve, hogy a /?p=1 helyett a / címet kapja meg a linkben, hogy megfeleljen a $pn bemeneti paraméter nulla értékének:

Függvény pagelink($p) ( return $p>1?"?p=".$p:""; ) if ($pn==0) $pn++; elseif ($pn==1) $pn--;

ingyenes gyűjtemény HTML és CSS oldalszámozás kód példák: reszponzív, egyszerű, anyagi kialakítású, navigációs pontok stb. A 2018. júniusi kollekció frissítése. 5 új elem.

kapcsolódó cikkek

A kódról

Reszponzív lapozás/lapozás HTML-ben és CSS-ben. Méretezze át böngészőjét, hogy érdekes hatást mutasson.

Reagáló: igen

Függőségek: bootstrap.css

A kódról

Sorkövetés lapozás

CSS sorkövető oldalszámozás.

Reagáló: igen

Függőségek: -

A kódról

Lapozás gombok

Tiszta CSS lapozási gombok.

Kompatibilis böngészők: Chrome, Firefox, Opera, Safari

Reagáló: igen

Függőségek: -

A kódról

Sorlapozás az egérmutatóval

Tiszta CSS-soros oldalszámozás hover effektussal.

Kompatibilis böngészők: Chrome, Edge, Firefox, Opera, Safari

Reagáló: igen

Függőségek: -

A kódról

Pacman oldalszámozás

Lapozási animáció HTML, CSS és JS segítségével.

Kompatibilis böngészők: Chrome, Edge, Firefox, Opera, Safari

Reagáló: igen

Függőségek: -

A kódról

egyszerű css.

A kódról

Tiszta CSS Pac-Man oldalszámozás lebegő animációval.

A kódról

Egyszerű reszponzív lapozás.

A kódról

HTML és CSS oldalszámozás.

A kódról

Lapozási példa, amely lehetővé teszi a különböző oldalak közötti navigálást. Ennek a példának href attribútumokkal kell rendelkeznie ahhoz, hogy egy tényleges, lapozást igénylő alkalmazással működjön.

A kódról

Lapozás egyéni CSS-tulajdonságokkal.

Lapozási lehetőségek és tervek.
Készítette: MojoM
2017. május 25

Demo GIF: SVG Page Hopper

HTML, CSS és SVG oldaltölcsér.
Chris Gannon készítette
2017. május 14

Demo GIF: Végtelen oldalszámozás

Végtelen oldalszámozás HTML-ben és CSS-ben.
Mariusz Dabrowski készítette
2017. április 27

A kódról

CSS komponensek: .

12 ötlet weboldal lapozáshoz HTML és CSS segítségével.
Rosa készítette
2016. november 3

Demo GIF: Lapozás

Lapozás HTML/CSS/JavaScript segítségével.
JP Nothard készítette
2016. október 9

Demo GIF: Lapozási lebegő animáció

HTML és CSS oldalszámozási lebegő animáció.
Elena Nazarova készítette
2016. szeptember 12

Lapozás lebegő effektussal.
Andre Wichert készítette
2016. augusztus 27

Lapozásjelzők HTML, CSS és JavaScript segítségével.
Moses Holmström készítette
2016. augusztus 19

Brendan Mullins készítette
2016. augusztus 16

Reszponzív Magic Line lapozás

Hozzon létre egy varázslatos sort az oldalszámozáshoz. Remekül néz ki.
Ryan Yu készítette
2015. február 18

Reszponzív, hozzáférhető, alternatív oldalszámozási kísérlet.
Simon Goellner készítette
2014. november 11

Demo GIF: Lapozási nyilak

Hajlító oldalszámozási nyilak.
Hakim El Hattab készítette
2013. október 18

Ebben a cikkben egy ilyen webes felület elem létrehozásának folyamatát tekintjük meg a lapozáshoz navigációs blokkként. A Bootstrap 3-ban és 4-ben ez a felhasználói felület elem a Lapozás összetevővel valósul meg.

Mi az a lapozás?

A lapozás az adatok oldalszámozása. Azok. ez a következtetés az adatok kimenetekor nem egyszerre, hanem kis részek (oldalak).

Az ezeken a részeken (oldalakon) való navigáláshoz egy navigációs blokkot használunk.

A Bootstrap keretrendszer Lapozás komponense éppen ennek az interfész elemnek a létrehozására szolgál, pl. navigációs blokk.

Lapozáshoz navigációs blokk létrehozása

A Bootstrap 3-ban a navigációs blokk szerkezete a következő:

Ebben a töredékben a navigációs elem a burkolótartály szerepét tölti be. Ebben a struktúrában csak a kisegítő technológiákhoz van szükség ezt a HTML-kódrészletet navigációnak tekintette.

Ezenkívül kívánatos, hogy a kisegítő technológiák elmagyarázzák, milyen navigációs blokkról van szó. Ez a művelet az aria-label attribútumon keresztül hajtható végre.

A navigációs blokk jelölése a lapozáshoz a Bootstrapben a következővel történik: pontozott lista. Ebben a blokkban minden navigációs hivatkozás egy elem, amely li-be van csomagolva és egy ul-ba van elhelyezve.

A Bootstrap navigációs dobozának vizuális tervezése az oldalszámozási osztály használatával történik, amelyet hozzá kell adni az ul -hoz.

Navigációs blokk szerkezete a Bootstrap 4-ben:

Vegye figyelembe, hogy a Bootstrap 4-ben az li és a elemeknek rendelkezniük kell a . li az oldalelem , a pedig az oldalhivatkozás . Ezek az osztályok CSS-stílusokat állítanak be az elemekhez, és szükségesek a navigációs blokk helyes megjelenítéséhez.

Szöveges címkék helyett használjon ikonokat vagy ikonokat

Példa a lapozáshoz használt navigációs sávra, amely ikonokat használ egyes hivatkozások tartalmaként:

A navigációs hivatkozás állapotának módosítása

A hivatkozások állapotának módosítása a navigációs sávban a letiltott és az aktív osztályok használatával történik. Az első osztály ( tiltott ) egy inaktív (nem kattintható) hivatkozás létrehozására szolgál. A második osztály ( aktív ) szükséges a kiemeléshez (jelzés) aktuális oldal. Az aktív és letiltott osztályokat nem magához a hivatkozáshoz kell hozzáadni, hanem a li elemhez.

A letiltott osztály beállítja a CSS-hivatkozások deklarációját: pointer-events: none . Ennek a nyilatkozatnak az a célja, hogy letiltja a hivatkozás működését. De nem tiltja le a billentyűzet használatával való váltást. Ezért, ha teljesen le szeretné tiltani az ilyen hivatkozások funkcióját a projektben, akkor további nyomon kell követnie őket JavaScript használatával, és hozzá kell adnia a tabindex="-1" attribútumot.

A link funkció letiltásának másik módja a ne használjon a elemet.

A navigációs blokk átméretezése

A Bootstrap 3-ban és 4-ben átméretezheti a navigációs mezőt a lapozás-lg és a lapozás-sm osztályok használatával. Ez úgy történik, hogy az egyik ilyen osztályt hozzáadja az oldalszámozási osztályhoz.

Az első osztályt ( lapozás-lg ) akkor használjuk, amikor a navigáció méretét kell növelni, a másodikat ( lapozás-sm ) pedig akkor, amikor a navigáció méretét csökkenteni kell.

Navigációs blokk igazítása

A Bootstrap 3-ban a navigációs sáv lapozáshoz igazítása ezzel történik szövegigazítási osztályok.

A Bootstrap 4-ben a lapozáshoz a navigációs sáv igazítása a flex osztályok használatával történik.

Pager komponens (Bootstrap 3)

A Pager egy Bootstrap 3 komponens, amelyet arra terveztek, hogy egyszerű navigációt hozzon létre az oldalakon vagy a webhely egyéb tartalmai között. Ez az összetevő 2 gombból (hivatkozásból) áll.

Ennek a navigációnak az egyik legáltalánosabb felhasználási módja az, hogy úgy alakítsák ki az első gomb egy újabb bejegyzéshez navigált az oldalon, a második pedig egy régebbihez.

Pager összetevő szintaxisa:

A gomb elrendezésének módosítása

Alapértelmezés szerint a Pager komponens gombjai középre igazítva. De ezen az opción kívül a Bootstrap 3 lehetővé teszi számukra, hogy különböző élekhez igazodjanak. Ezt úgy teheti meg, hogy az első gombhoz és a másodikhoz hozzáadja az osztályt. Az előző osztály balra és jobbra igazítja a hivatkozást.

A gomb funkcióinak letiltása

Egy gomb letiltott állapotba állítása a letiltott osztály hozzáadásával történik.

A webhelyek általában több oldalt tartalmaznak. Elhelyezkedhetnek 3-5 oldalként, például a landing oldalon, és talán több, sokkal több.

Minden jó webhelynek tartalmaznia kell olyan navigációt, amely lehetővé teszi a felhasználó számára, hogy megfelelően navigáljon és mozogjon a webhely oldalai között. Ilyen oldalszámozást JavaScript segítségével hozhat létre. Ebben a cikkben egy ilyen navigáció létrehozásáról fogunk beszélni.

Egy másik szempont, hogy a szokásos JavaScript mellett a példa a Bootstrap 4-et használja. Ennek a rendszerindító lapozási komponense a JQuery könyvtárral van kombinálva, nevezetesen a speciális Buzina Pagination pluginnal. Lehetővé teszi, hogy az összes információt több oldalra bontsa, a köztük lévő navigáció létrehozásával.

A szükséges keretek összekapcsolása

A Bootstrap és a JQuery használatához fel kell vennie őket. Ezt megteheti a HTML-dokumentumban címkék segítségével