Adaptív oldalszámozás. Bootstrap – Lapozás (navigációs mező a lapozáshoz)

A lapozás, vagy egyszerűen oldalankénti navigáció minden többé-kevésbé teljes webhely fontos eleme. A különféle tartalomkezelő rendszerek többnyire beépített eszközökkel rendelkeznek a lapozás megvalósításához. Ehhez a hasznos vállalkozáshoz nagyon sok külön plugin is készült, a legtöbb esetben a könyvtár segítségével épülnek fel. Mindezek a beépülő modulok teljesítményükben és szoftverükben eltérőek funkcionalitás, de ami a legfontosabb, ez egy nagyszerű alternatíva a nagy tartalmú oldalak 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, oldalankénti navigáció létrehozásához, amely segít a rendszerezésben, vonzó és gyors lapozásban.

Nagyon könnyű minden tekintetben, súlyában és mindenben, ami a csatlakoztathatóságról, a beállításokról szól, gyorsan létrehozható oldalszámozás, három dizájnstílussal, és a támogatásért díjat kell fizetni.

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

Most nézzük meg közelebbről, hogyan lehet megfelelően csatlakoztatni magát a bővítményt és a stílusfájlt a dokumentumhoz, azaz közvetlenül beágyazni a webhely oldalaira, és menjen át a rendelkezésre álló bővítmény beállításain.

Először természetesen meg kell szerezni egy plugint, vagyis a forráskódot, amibe maga a jquery javascript és a css styles fájl is gondosan be van csomagolva.

Lépésről lépésre nézzük meg a bővítmény használatát:

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

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

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

Nem kell bekeríteni a kertet, egyszerűen válassza ki a kívánt stílust, legyen világos, sötét vagy kompakt, és illessze be a szabályokat a sablon stíluslap .css fájljába. Írja meg saját stílusait vagy használja Bootstrap, amely szintén egy 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 az oldal azon oldalain, ahol el szeretné helyezni, logikusabb és leggyakrabban a fő tartalom alján található, írja be a következőket:
Világos háttérhez:

Kompakt téma:

$ (függvény () ($ (# light-pagination) .pagination ((elemek: 100, itemsOnPage: 10, cssStyle: "light-theme");));

A példában az inicializálást használtam a világos téma oldalszámozására # világos oldalszámozás, a választót valami másra cserélheti, kompaktnál ez # kompakt lapozás, 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 sem. cssStyle.
Kai fentebb már írtam, a plugin nagyon rugalmas a beállításokban, a következő opciók változtathatók:

• tételeket- Az oldalak kiszámításához felhasználandó elemek teljes száma. Alapértelmezett: 1 .
• itemsOnPage- Az egyes oldalakon megjelenő elemek száma. Alapértelmezett: 1 .
• oldalakat- Választható. Ha meg van adva, 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ó navigáció közben. 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: 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- A gomb szövege az előző oldalra. Alapértelmezett: "Előző".
• következőSzöveg- Gomb szövege a következő oldalhoz. Alapértelmezett: "Következő"
• cssStyle- Határozd meg CSS stílus... 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), miért nem értettem, miért kell letiltani, de van ilyen lehetőség, értéke: "false".

A legalapvetőbb beállításokkal foglalkoztunk. O további funkciókatés a beépülő modul használatának elérhető módszereit, megtudhatja, ha tanulmányozza a dokumentációt közvetlenül a fejlesztői oldalon.

Nem tudok mást tenni, mint sok szerencsét és sikert kívánni az új projektjeihez.

Ingyenes gyűjtemény HTML és CSS oldalszámozás kód példák: reszponzív, egyszerű, anyagszerű 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ó 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ő oldalszámozás

CSS sorkövető oldalszámozás.

Reagáló: igen

Függőségek: -

A kódról

Lapozás gombok

Tiszta CSS oldalszámozás gombok.

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

Reagáló: igen

Függőségek: -

A kódról

Soros oldalszámozá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.

Lapszámozás opciók és tervez.
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ási mutató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

A webhelyek általában több oldalt tartalmaznak. Akár 3-5 oldalt is tartalmazhatnak, például a céloldalon, és talán még többet, sokkal többet.

Minden jó webhelynek tartalmaznia kell olyan navigációt, amely lehetővé teszi a felhasználó számára a navigálást és a helyes navigálást a webhely oldalai között. Ilyen oldalszámozást létrehozhat, amikor JavaScript segítség... Ebben a cikkben arról lesz szó, hogyan hozhat létre ilyen típusú navigációt.

Még egy dolog, a szokásos JavaScript mellett a példa a Bootstrap 4-et használja. Ennek a bootstrap lapozási komponense a jQuery könyvtárral van kombinálva, mégpedig a speciális Buzina Pagination pluginnal. Lehetővé teszi az összes információ felosztását több oldalra, és navigációt hoz létre közöttük.

A szükséges keretek összekapcsolása

A Bootstrap és a JQuery használatához össze kell kapcsolnia őket. Ezt megteheti a sajátjában HTML dokumentum címkék segítségével