Inteligentné stránky: Stránkovanie pomocou jQuery. Stránkovanie textu – automatické stránkovanie jQuery alebo automatické stránkovanie textu

Doplnky stránkovania jQuery sú skripty, ktoré môžete integrovať do svojej lokality a oddeliť tak stránky a príspevky na viacero samostatných stránok. V zásade existujú dva spôsoby, ako vytvoriť stránkovanie lokality. Buď pomocou doplnku, ktorý po načítaní stránky rozdelí údaje na viacero stránok, alebo pomocou skriptu na strane servera, kde sa požadované množstvo údajov načíta z databázy a potom sa načíta na stránku. Stránkovanie môže byť dobrým spôsobom, ako zvýšiť počet zobrazení stránky na vašom webe, a tým zlepšiť aj mieru odchodov a ďalšie faktory správania, ktoré vyhľadávače zohľadňujú.

Ak máte na svojich stránkach veľa údajov, doplnky na stránkovanie vám môžu pomôcť urobiť váš obsah príjemnejším. V tomto článku sa s vami podelíme o niektoré doplnky, ktoré vám pomôžu vytvoriť správne nastavenia stránkovania vašich webových stránok. Väčšina týchto doplnkov je zadarmo a je možné ich integrovať do akéhokoľvek dizajnu.

Toto je skvelý doplnok jQuery od Remy Elazare, ktorý kombinuje stránkovanie a posúvanie v jednoduchom používateľskom rozhraní.

jPaginovať

jPaginovať je doplnok stránkovania jQuery, ktorý má jednu špeciálnu funkciu: animované čísla stránok. Používateľ môže prechádzať dostupnými číslami strán kliknutím alebo jednoduchým umiestnením myši na šípku. Odkazy na prvé a posledná strana tiež dostupný.

Pajinate

Pajinate je jednoduchý a flexibilný doplnok jQuery, ktorý vám umožňuje rozdeliť dlhé zoznamy alebo obsah na viacero samostatných stránok. Nielenže je to jednoduchá alternatíva k implementácii na strane servera, čas načítania stránky medzi prechodmi stránok je prakticky nulový (samozrejme za predpokladu primeranej veľkosti stránky).

Jednoduchý doplnok stránkovania jQuery s 3 témami CSS.

jPList

jPList je flexibilný doplnok jQuery na triedenie, stránkovanie a filtrovanie akýchkoľvek značiek HTML (DIV, UL/LI, tabuľky atď.) - prémiový doplnok od CodeCanyon.

Tento doplnok vytvára jednoduché triedenie obsahu a umožňuje vám spravovať obsah pomocou stránkovania! Jednoduché triedenie obsahu poskytuje jednoduchý spôsob, ako vylepšiť svoje rozhranie poskytnutím pohodlného triediaceho mechanizmu. - Prémiový doplnok na CodeCanyon

Jednoduché stránkovanie

Tento doplnok vám umožňuje jednoducho zobraziť zoznam položiek so stránkovaním. Je veľmi ľahko implementovateľný a veľmi ľahký, takže sa môže hodiť na použitie vo vašich vlastných projektoch.

simplepager

simplepager umožňuje vytvárať stránkovanie s čo najmenším úsilím a konfiguráciou. Tento doplnok môže stránkovať prvky div, odseky, položky zoznamu a takmer akýkoľvek iný obsah.

plugin jQuery, ktorý poskytuje nová metóda stránkovanie pre váš web alebo aplikáciu. Namiesto uvádzania čísel stránok, ako sú tradičné metódy, jqPagination používa interaktívny výstup stránkovania, ako napríklad „1 z 5 stránok“, keď je vybratý, doplnok umožňuje používateľovi zadať požadované číslo stránky. Odkazy „prvá strana“, „predchádzajúca“, „nasledujúca“ a „posledná“ sú predvolene povolené, ale možno ich vypnúť.

Ak máte veľký zoznam položiek (napr. výsledky vyhľadávania alebo novinky, články), môžete ich zoskupiť do samostatných stránok a pridať navigačné prvky pomocou tohto pluginu.

Ďalší doplnok jQuery na vytváranie navigácie po jednotlivých stránkach. Je atraktívny, intuitívny, obsahuje posúvač na posúvanie stránok a môžete pridať neobmedzený počet stránok.

Plugin jQuery na vytváranie stránkovania (podľa rôzneho obsahu) nie na základe počtu prvkov na stránke, ale podľa výšky oblasti obsahu.

Inteligentný stránkovač

Inteligentný stránkovač je doplnok stránkovania jQuery s bohatými funkciami, vďaka ktorému je pridávanie stránkovania hračkou a navyše je vysoko prispôsobiteľný. Smart Paginator dokáže automaticky filtrovať údaje aj na strane klienta.

Ako už názov napovedá, používa Ajax na vytváranie stránkovania na vašom webe. Načíta len určitú časť, nie celú stránku, čím sa urýchli načítanie stránky.

Sladké stránky

Sladké stránky je doplnok jQuery, ktorý vám umožní premeniť bežný neusporiadaný zoznam položiek na pohodlnú sadu stránok s navigáciou. Dá sa použiť na komentáre, prezentácie alebo akýkoľvek iný druh štruktúrovaného obsahu.

Ak máte nejaké otázky, použite náš

Stránkovanie, a ak poptrosta – stránkovanie, je dôležitým prvkom každého viac či menej vyplneného webu. Rôzne systémy na správu obsahu majú z väčšej časti vstavané nástroje na implementáciu stránkovania. Pre túto užitočnú vec je napísaných aj veľa samostatných pluginov, vo väčšine prípadov sú zostavené pomocou . Všetky tieto zásuvné moduly sa líšia štýlom vykonávania aj spôsobom funkčnosť, ale čo je najdôležitejšie, všetky z nich sú skvelou alternatívou k implementácii stránkovania hromadného obsahu stránok na strane servera.

Navrhujem na zváženie, podľa môjho názoru, jeden z najjednoduchších pluginy jQuery, aby ste vytvorili stránkovanie, ktoré vám pomôže usporiadať, príťažlivo a rýchlo.

Veľmi ľahké, v každom ohľade a hmotnosti a všetko o pripojení, nastaveniach, hravé na vytváranie stránkovania, s tromi štýlmi dizajnu a plné podpory.

Mimochodom, ak nie ste spokojní štandardné štýly, môžete použiť , do ktorého nebude ťažké zaskrutkovať .css zapojiť.

Teraz sa pozrime bližšie na to, ako správne pripojiť samotný doplnok a súbor štýlu k dokumentu, to znamená priamo ho vložiť na stránky webu a prejsť dostupnými nastaveniami doplnku.

Na začiatok je samozrejme potrebné mať plugin, teda zdroje, v ktorých je starostlivo zabalený samotný javascript jquery a súbor v štýle css.

Poďme sa pozrieť na to, ako doplnok používať krok za krokom:

Krok 1Vrátane jQuery

V tele stránky v sekcii ... musíte pripojiť rámec jQuery, najlepšie verziu 1.7.2 alebo novšiu, môžete to urobiť pomocou špeciálneho úložiska Google:

Ak máte na stránke jQuery už je povolený a pracuje s bytom a main, môžete pokojne preskočiť všetky vyššie popísané gestá, hlavnou vecou je uistiť sa, že verzia jQuery nie je príliš hustá. Vo WordPress, mimochodom, je to všetko v poriadku.
Ďalej pripojíme naše pracovný kôň- zapojiť jquery.simplePagination.js:

Záhradu nemôžete oplotiť, ale jednoducho vyberte štýl, ktorý potrebujete, svetlý, tmavý alebo kompaktný a vložte súbor pravidiel do súboru .css vašej šablóny. Predpísať svoj vlastné štýly alebo použiť Bootstrap, tiež možnosť, pokiaľ ide o originalitu a rozvoj zručností pri vytváraní stránok, ešte výhodnejšia.

Krok 3 HTML

Ak chcete zobraziť lištu stránkovania na stránkach lokality, kde ju plánujete umiestniť, je to logickejšie a najčastejšie je to v spodnej časti hlavného obsahu, mali by ste napísať nasledovné:
Pre svetlé pozadie:

Kompaktný motív:

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

V príklade som použil inicializáciu #light-pagination pre stránkovanie svetlej témy, ale selektor môžete zmeniť na iný, pre kompaktné je to #compact-pagination , alebo pre tmavý štýl #dark-pagination . V tomto prípade nezabudnite zmeniť triedu vo funkcii css štýl.
Ako som už písal vyššie, plugin je veľmi flexibilný v nastaveniach, na zmenu sú k dispozícii tieto možnosti:

položky- Celkový počet prvkov, ktoré sa použijú na výpočet stránok. Predvolená hodnota: 1 .
itemsOnPage- Počet položiek zobrazených na každej stránke. Predvolená hodnota: 1 .
stránky- Voliteľné. Ak je zadaná hodnota, voľby items a itemsOnPage sa ignorujú. Nastaví počet strán v zozname.
zobrazenéStránky- Koľko čísel strán by malo byť viditeľných počas navigácie. Minimálna povolená hodnota: 3 , predvolené: 5 .
hrany— Koľko čísel strán je viditeľných na začiatku a na konci číslovania. Predvolená hodnota: 2 .
aktuálna stránka- Ktorá stránka sa vyberie ihneď po spustení. Logicky je predvolená hodnota: 1 .
hrefTextPrefix- Reťazec použitý v atribúte HREF sa pridá pred číslo stránky. Predvolená hodnota: "#strana".
hrefTextSuffix- Reťazec použitý v atribúte HREF sa vkladá za číslo stránky. Predvolený je prázdny reťazec.
prevText— Text tlačidla na predchádzajúcu stránku. Predvolená hodnota: "predchádzajúci".
ďalšíText— Text tlačidla pre nasledujúcu stránku. Predvolená hodnota: Ďalšie
css štýl- Definujte štýl CSS. Predvolená hodnota: "svetlá téma"
selectOnClick- Výber stránky po kliknutí, predvolene - povolený ( pravda), Nerozumel som, prečo to deaktivovať, ale existuje taká príležitosť, hodnota je „false“.

Prebrali sme najzákladnejšie nastavenia. O pridané vlastnosti a dostupné metódy Ako používať tento plugin, zistíte tak, že si prečítate dokumentáciu priamo na stránke vývojára.

Zostáva mi už len zaželať vám veľa šťastia a úspechov pri práci na vašich nových projektoch.

Môžete použiť navigáciu dotykom a potiahnutím myšou
Môžete použiť rôzne typy zmien stránok
Stav aktívnej stránky je uložený v rozhraní History API
Môžete použiť rôzne sady ovládacích prvkov: čísla, šípky, bod, indikátor priebehu a pole na zadanie požadovanej stránky
Môžete použiť jednu z pripravených tém
Môžete vylepšiť vzhľad nielen textu, ale aj obrázkov či zoznamov
Pomocou veľkého množstva rôznych parametrov a metód, môžeš vytvorte cukrík namiesto nudného textu

SÚPRAVY OVLÁDACÍCH PRVKOV

Classic of Pagination pozostáva zo sady tlačidiel, ako napríklad „Domov“, „Predchádzajúca“, „Ďalšia“, „Posledná strana“ a samozrejme – čísla strán. Pozostáva tiež z bloku stavu stránky. Každá položka je samostatným a nezávislým prvkom, ktorý sa môže zobraziť kdekoľvek na stránke alebo sa nemusí zobraziť vôbec.

Ak chcete rýchlo prejsť na požadovanú stránku - zadajte číslo stránky do poľa a kliknite na tlačidlo "OK".

Tento set je perfektnou navigáciou vhodnou pre malý počet strán, kedy stačí stránky jednoducho otáčať tam a späť

Toto je najminimalistickejší pohľad na ovládacie prvky, podobný tomu, ktorý ste predtým videli na posúvačoch.

Tento ovládací prvok je užitočný, ak potrebujete mať rýchly prístup ku všetkým stránkam. Tento typ ovládania je vhodný pre veľký text a pre malé príspevky

Tento druh ovládania je minimalizovaný kvôli absencii tlačidiel s číslami strán.

Ide o štýlový a moderný vzhľad správy stránok. Zaberá veľmi málo miesta, ale je veľmi funkčný.

Toto nie je štandardný typ stránkovania. Pomocou je možné odhadnúť percento prečítaných strán.

Ovládacie prvky nie sú potrebné na registráciu do pluginu. Do ľubovoľného umiestnenia kódu môžete manuálne pridať ľubovoľný ovládací prvok, ale je potrebné zadať jedinečný názov stránkovacieho bloku v atribúte data-href a identifikátor prechodu. Ako ovládacie tlačidlo môžete použiť ľubovoľný html prvok: a, button, span, div, img a iné.

Táto sada ovládacích prvkov kombinuje klasický vzhľad a blok pre bystoro prechod na konkrétnu stránku.

TYP OBSAHU

Ak na blokovanie používate zásuvný modul, ktorý obsahuje iba textové uzly, text bude rozdelený na časti bodkami, ak sú v texte. Ak text nie je bodový, na oddelenie textu musíte zadať znak v parametri „splitSymbols“, ako je medzera, písmeno alebo iné

Ak na blokovanie používate zásuvný modul, ktorý obsahuje značky odsekov alebo iné značky html s textom, text bude rozdelený na časti týmito značkami html.

Plugin rovnako dobre rozdeľuje na stránke ako značky na formátovanie textových a obrázkových značiek. Sledujte správanie výšky obrázka pomocou štýlov CSS

zoznam je rozdelený ako ostatné značky. Najdôležitejšie je, že zoznam prvkov je potomkom inicializačného prvku

ĎALŠIE Ukážky

Na jednej stránke môže byť niekoľko blokov s navigáciou po stránke. A každý z týchto blokov môže mať vaše nastavenia

Tento parameter určuje číslo stránky, ktorá sa zobrazí po prvom sťahovaní

Webové stránky zvyčajne obsahujú niekoľko stránok. Môžu byť umiestnené ako 3-5 stránok, napríklad na vstupnej stránke, a možno aj viac, oveľa viac.

Každá dobrá stránka by mala obsahovať navigáciu, ktorá používateľovi umožní správnu navigáciu a pohyb medzi stránkami webu. Takúto stránkovanie môžete vytvoriť pomocou JavaScriptu. V tomto článku si povieme, ako takúto navigáciu vytvoriť.

Ešte jedna vec, okrem bežného JavaScriptu je v príklade použitý Bootstrap 4. Jeho súčasť bootstrap stránkovanie v kombinácii s knižnicou JQuery, konkrétne špeciálnym pluginom Buzina Pagination. Umožňuje vám rozdeliť všetky informácie na niekoľko stránok s vytvorením navigácie medzi nimi.

Pripojenie potrebných rámcov

Ak chcete pracovať s Bootstrap a JQuery, musíte ich zahrnúť. To sa dá urobiť vo vašom HTML dokument pomocou značiek