Лесна навигация на страници с помощта на jquery. Текстова пагинация - jQuery Auto Pagination или автоматична текстова пагинация

Странирането, или ако е popprost - навигацията на страницата, е важен елемент на всеки повече или по-малко пълен уебсайт. Различните системи за управление на съдържанието в по-голямата си част имат вградени инструменти за прилагане на пагинация. Има и много отделни плъгини, написани за тази полезна задача; в повечето случаи те са изградени с помощта на . Всички тези плъгини са различни по стил и функционалност, но най-важното е, че всички те са отлична алтернатива на изпълнението от страна на сървъра за разделяне на обемното съдържание на сайтове на страници.

Предлагам за разглеждане, по мое мнение, един от най-лесните jQuery плъгини за създаване на навигация на страници, който ще ви помогне да организирате атрактивно и бързо страниране.

Много лек във всички отношения, както по отношение на теглото, така и по отношение на връзката, настройките, бърз за създаване на пагинация, оборудван с три стила на дизайн и зареден с поддръжка.

Между другото, ако не сте доволни от стандартните стилове, можете да използвате, което няма да е трудно да прикачите към .css на плъгина.

Сега нека разгледаме по-отблизо как правилно да свържете самия плъгин и стиловия файл към документа, тоест директно да го внедрите на страниците на сайта и да преминете през наличните настройки на плъгина.

Като начало, разбира се, трябва да имате плъгин, тоест с източници, в които самият jquery javascript и файлът със стил css са внимателно опаковани.

Нека да разгледаме как да използвате приставката стъпка по стъпка:

Стъпка 1: Свържете jQuery

В тялото на страницата, в секцията ..., трябва да свържете рамката jQuery, за предпочитане версия 1.7.2 или по-нова, това може да стане с помощта на специално хранилище на Google:

Ако вече имате активиран jQuery на вашия сайт и работите на пълна скорост, можете спокойно да пропуснете всички движения, описани по-горе, основното е да се уверите, че версията на jQuery не е твърде плътна. В WordPress, между другото, това е наред.
След това свързваме нашия работен кон - плъгина jquery.simplePagination.js:

Не е нужно да се притеснявате за това, а просто изберете стила, от който се нуждаете, светъл, тъмен или компактен, и поставете набор от правила във файла styles.css на вашия шаблон. Регистрирането на собствени стилове или използването на Bootstrap също е опция, от гледна точка на оригиналност и развитие на умения за изграждане на сайтове, дори по-предпочитана.

Стъпка 3. HTML

За да се покаже панелът за навигация на страницата на страниците на сайта, където планирате да го поставите, по-логично и най-често това е в долната част на основното съдържание, трябва да напишете следното:
За светъл фон:

Компактна тема:

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

В примера използвах инициализация за страниране на светлата тема #light-pagination, можете да промените селектора на друг, за компактен е #compact-pagination или за тъмен стил #dark-pagination. В този случай не забравяйте да промените класа във функцията cssStyle.
Както вече писах по-горе, плъгинът е много гъвкав в настройките, следните опции са достъпни за промяна:

елементи — Общият брой елементи, които ще бъдат използвани за изчисляване на страници. По подразбиране: 1.
itemsOnPage — Броят елементи за показване на всяка страница. По подразбиране: 1.
страници — По избор. Ако е посочена стойност, елементите и опциите itemsOnPage се игнорират. Задава броя на страниците в списъка.
displayedPages — Колко номера на страници трябва да се виждат по време на навигация. Минимална позволена стойност: 3, по подразбиране: 5.
ръбове — Колко номера на страници се виждат в началото и в края на номерацията. Стойност по подразбиране: 2.
currentPage — Коя страница ще бъде избрана веднага след стартиране. Логична, стойност по подразбиране: 1.
hrefTextPrefix – Низът, използван в атрибута HREF, се добавя преди номера на страницата. По подразбиране: "#page- ".
hrefTextSuffix — Низът, използван в атрибута HREF, се вмъква след номера на страницата. По подразбиране е празен низ.
prevText — Текст на бутона към предишната страница. По подразбиране: "Предишна".
nextText — Текст на бутона за следващата страница. По подразбиране: "Напред"
cssStyle - Дефинира CSS стила. По подразбиране: "светлинна тема"
selectOnClick - Избиране на страница след щракване, по подразбиране - активирано (true), все още не разбирам защо да го деактивирам, но има такава опция, стойност: „false“.

Разгледахме най-основните настройки. Можете да научите за допълнителни функции и налични методи за използване на този плъгин, като проучите документацията директно на страницата на разработчика.

Мога само да ви пожелая късмет и успех в работата по новите ви проекти.

Уеб сайтовете обикновено съдържат няколко страници. Те могат да съдържат 3-5 страници, например на целева страница, или може би повече, много повече.

Всеки добър уебсайт трябва да съдържа навигация, която ще позволи на потребителя да навигира правилно и да се движи между страниците на сайта. Можете да създадете такава пагинация с помощта на JavaScript. В тази статия ще говорим как да създадем такава навигация.

Още нещо, в допълнение към обикновения JavaScript, примерът използва Bootstrap 4. Неговият bootstrap компонент за страниране е комбиниран с библиотеката JQuery, а именно специалния плъгин Buzina Pagination. Тя ви позволява да разделите цялата информация на няколко страници с навигация между тях.

Свързване на необходимите рамки

За да работите с Bootstrap и JQuery, трябва да ги свържете. Това може да се направи във вашия HTML документ с помощта на . Създайте 3 сдвоени етикета ;. Ще свържем Ajax.js, bootstrap 4 и самия плъгин JQuery.

За да свържете правилно bootstrap, вие също трябва да използвате маркера; в неговия атрибут href ние посочваме връзка към нашата рамка. Той ще съдържа връзка към стиловете, които плъгинът съдържа.

И така, свързахме всичко необходимо за работа. Остава само да свържете плъгина за създаване на пагинация - Buzina Pagination. За да го създадем, ние също създаваме и тагове. В атрибутите "href" и "src" въвеждаме една и съща връзка.

Добавките Buzina Pagination и Bootstrap, освен скриптове, съдържат и необходимите стилове. Свързваме ги чрез тага ;. Запомнете сега – дори и да разбирате добре CSS, не ви препоръчваме да влизате и да променяте настройките на плъгина. Просто за забавление можете да ги отворите в редактор на код и да ги видите, но не забравяйте първо да запазите оригиналната версия на кода.

Вашият HTML документ трябва да съдържа следния код:

Страниране на сайта с помощта на jQuery: Bootstrap 4 .container ( margin: 150px auto; ) Оформление на страницата. HTML

Във всички наши статии разглеждахме създаването на 1 HTML страница, в този пример ще създадем няколко наведнъж, чрез един документ. В същото време няма да ги поставяме на различни връзки, те ще бъдат достъпни чрез щракване върху бутона. Ще създадем отделен блок за всяка страница.

В нашия пример създаваме общо 5 страници. Създайте отделен div за всеки от тях. Можете да напишете някакъв текст вътре за визуално показване. Ако искате, можете да създадете 10, 20 и 30 страници.

Нямате нужда от класове или идентификатори, за да работите с тях. Основното е, че всички тези страници са разположени вътре в главния блок с примерния клас.

JQuery функции

Трябва да свържете няколко функции:

Заключение

Завършихме създаването на пагинацията. В крайна сметка какво получихме? Имаме добре оформена навигация, която ще пасне идеално на вашия уебсайт. Добавете няколко елемента и можете да го адаптирате към страниците, които имате.

Можете да промените скриптовете, както желаете, но само ако сте добре запознати с JavaScript. Основното нещо е да не променяте стойностите на скриптовете и стиловете на приставките.

Тази пагинация има огромно предимство - лекота на използване. Потребителят няма да има нужда да зарежда допълнителни връзки, за да навигира между страниците.

Освен това, поради малкия брой използвани скриптове, оптимизацията няма да бъде значително намалена.

Тагове:

Приставките за пагиниране на jQuery са скриптове, които могат да бъдат интегрирани във вашия сайт, за да разделят страници и публикации на множество отделни страници. Има основно два начина за създаване на пагинация на уебсайт. Или чрез плъгин, който разделя данните на множество страници, след като страницата се зареди, или чрез скрипт от страна на сървъра, където необходимото количество данни се извлича от базата данни и след това се зарежда на страницата. Страницирането може да бъде добър начин да увеличите броя на показванията на страниците на вашия сайт и по този начин да подобрите степента на отпадане и други поведенчески фактори, взети предвид от търсачките.

Ако имате голямо количество данни на вашите страници, тогава плъгините за създаване на навигация на страницата ще ви помогнат да направите съдържанието по-удобно за посетителите. В тази статия ще споделим с вас някои плъгини, които ще ви помогнат да създадете желаните настройки за пагиниране на вашите уебсайтове. Повечето от тези добавки са безплатни и могат да бъдат интегрирани във всеки дизайн.

Това е страхотен плъгин за jQuery от Remy Elazare, който съчетава пагинация и превъртане в прост потребителски интерфейс.

jPaginate

jPaginate е jQuery плъгин за страниране, който има една функция: анимирани номера на страници. Потребителят може да превърта през наличните номера на страници, като щракне или просто задържи курсора върху стрелката. Налични са и връзки към първата и последната страница.

Пажинат

Pajinate е прост и гъвкав jQuery плъгин, който ви позволява да разделяте дълги списъци или съдържание на множество отделни страници. Не само, че това е проста алтернатива на внедряването от страна на сървъра, времето за зареждане на страницата между преходите на страницата е практически нула (с разумен размер на страницата, разбира се).

Прост плъгин jQuery за създаване на пагинация с три CSS теми.

jPList

jPList е гъвкав jQuery плъгин за сортиране, страниране и филтриране на всякакви HTML маркировки (DIV, UL/LI, таблици и т.н.) - премиум плъгин от CodeCanyon.

Този плъгин създава просто сортиране на съдържание и ви позволява да управлявате съдържанието си чрез пагинация! Simple Content Sorting предоставя лесен начин за украсяване на вашия интерфейс чрез предоставяне на удобен механизъм за сортиране. - Премиум приставката е CodeCanyon

Лесно страниране

Този плъгин ви позволява лесно да видите списък с елементи, пагинирани. Той е много лесен за изпълнение и много лек, така че може да бъде полезен за използване във вашите собствени проекти.

SimplePager

SimplePager ви позволява да създавате страниране с възможно най-малко усилия и конфигурация. Този плъгин може да пагинира div, абзаци, списъчни елементи и почти всяко друго съдържание.

Добавка jQuery, която предоставя нов метод за пагиниране на вашия уебсайт или приложение. Вместо да извежда списък с номера на страници, както при традиционните методи, jqPagination използва интерактивен изход на номера на страници, като например „1 от 5 страници“, когато е избран, плъгинът позволява на потребителя да въведе желания номер на страница. Връзките „първа страница“, „предишна“, „следваща“ и „последна“ са активирани по подразбиране, но могат да бъдат деактивирани.

Ако имате голям списък от елементи (например резултати от търсене или новини, статии), можете да ги групирате в отделни страници и да добавите елементи за навигация с помощта на този плъгин.

Друг плъгин за jQuery за създаване на навигация на страници. Той е атрактивен, интуитивен, предлага се със скролер за страници и можете да добавяте неограничен брой страници.

jQuery плъгин за създаване на пагинация (за различно съдържание), която се основава не на броя елементи на страницата, а на височината на областта със съдържание.

Интелигентен пагинатор

Smart Paginator е богат на функции jQuery плъгин за страниране, който прави добавянето на страниране лесно, а също така е много персонализиран. Smart Paginator може също автоматично да филтрира данни от страна на клиента.

Както подсказва името, той използва Ajax за създаване на навигация на страницата на вашия сайт. Той ще зареди само определена част, а не цялата страница, като по този начин ще ускори времето за зареждане на сайта.

Сладки страници

Sweet Pages е jQuery плъгин, който ви позволява да трансформирате прост неподреден списък от елементи в удобен набор от страници с навигация. Може да се използва за коментари, слайдшоута или друг вид структурирано съдържание.

Ако имате някакви въпроси, препоръчваме да използвате нашия

Можете да използвате навигация с докосване и плъзгане на мишката

Можете да използвате различни видове смяна на страниците

Състоянието на активната страница се запазва в API на историята

Можете да използвате различни набори от контроли: числа, стрелки, точка, лента за напредък и поле за въвеждане на желаната страница

Можете да използвате една от готовите теми

Можете да подобрите външния вид не само на текст, но и на изображения или списъци

Използвайки голям брой различни параметри и методи, можете да създадете бонбон вместо скучен текст

КОМПЛЕКТ ЕЛЕМЕНТИ ЗА УПРАВЛЕНИЕ

Classic of Pagination се състои от набор от бутони, като "Начало", "Предишна", "Следваща", бутон "Последна страница" и разбира се - номерата на страниците. Също така се състои от блок със статус на страницата. Всеки елемент е отделен и независим елемент, който може да се показва навсякъде на страницата или изобщо да не се показва.

За бързо преминаване към желаната страница - въведете номера на страницата в полето и щракнете върху "OK".

Този комплект е перфектна навигация, подходяща за малък брой страници, когато е достатъчно, просто прелиствайте страниците напред-назад

Това е най-минималистичният изглед на контролите, подобен на този, който виждате в плъзгачите.

Тази контрола е полезна, ако трябва да имате бърз достъп до всички страници. Този тип контрол е подходящ за голям текст и за малки публикации

Този вид контрол е сведен до минимум поради липсата на бутони с номера на страници.

Това е стилен и модерен вид на управление на страници. Заема много малко място, но е много функционален.

Това не е стандартен тип пагинация. С него е възможно да се оцени процентът на прочетените страници.

Контролните елементи не са необходими за регистриране в приставката. Можете ръчно да добавите всяка контрола към всяко местоположение на кода, но е необходимо да посочите уникално име на блока за страниране в атрибута data-href и идентификатора на прехода. Като контролен бутон можете да използвате всеки html елемент: a, button, span, div, img и други.

Този набор от контроли съчетава класическата визия и блок за бързо преминаване към конкретната страница.

ТИП СЪДЪРЖАНИЕ

Ако използвате добавка за блокиране, която съдържа само текстови възли, текстът ще бъде разделен на части от точки, ако те са в текста. Ако текстът не е точки, за разделянето на текста трябва да посочите знака в параметъра "splitSymbols", като интервал, буква или др.

Ако използвате добавка за блокиране, която съдържа тагове за параграфи или други html тагове с текст, текстът ще бъде разделен на части от тези html тагове.

Плъгинът еднакво добре се разделя на страницата като тагове за форматиране на текст и тагове за изображения. Следете поведението на височината на изображението, като използвате CSS стилове

списъкът е разделен като другите тагове. Най-важното е, че списъкът с елементи е дете на елемента за инициализация

ОЩЕ ДЕМО

На една страница може да има няколко блока с навигация по страниците. И всеки от тези блокове може да има вашите настройки

Този параметър указва номера на страницата, която да се покаже след първия сайт за изтегляне

Reg.ru: домейни и хостинг

Най-големият регистратор и хостинг доставчик в Русия.

Повече от 2 милиона имена на домейни в услуга.

Промоция, домейн поща, бизнес решения.

Повече от 700 хиляди клиенти по света вече са направили своя избор.

*Задръжте мишката, за да спрете превъртането на пауза.

Назад напред

Интелигентни страници: Страниране с помощта на jQuery

Разделянето на съдържанието на отделни страници (страниране) е обичайно решение при работа с големи количества информация. Това обикновено се осъществява чрез предаване на номера на необходимата страница към допълнителен процесор, който извлича информация от базата данни и я връща в определен вид. Трудоемък процес, но необходимо зло. Или не?

Когато работите с малки количества информация, не би ли било удобно съдържанието да е предварително подготвено, ясно организирано и лесно достъпно?

Сега ще създадем jQuery решение, което ще ни позволи да конвертираме обикновен неподреден списък от елементи в удобен за търсачката набор от страници с лесна навигация. Този плъгин може да се използва за коментари, слайдшоута или друг вид структурирано съдържание.

Концепция

При извикване плъгинът разделя елементи

, съдържащ се в неподреден списък от конфигурируем брой групи. Тези групи (или страници) са маркирани с ляв флаг, така че не се виждат, докато обвиват елемента

препълване: скрито

.

Вижте илюстрацията по-долу, за да разберете по-добре идеята.

Стъпка 1 - XHTML

Първата стъпка е да създадете XHTML маркиране. Плъгинът трябва да бъде предоставен с неподреден списък
- вътре в него. По-долу е кодът от файла demo.html, който ще намерите в примерния архив:
  - Lorem ipsum dolor sit amet...
  - Lorem ipsum dolor sit amet...
  - Lorem ipsum dolor sit amet...
  - Lorem ipsum dolor sit amet...
  Блокирайте основендейства като контейнер за пагинирания елемент
  - всяко съдържание, тъй като размерите се изчисляват автоматично от jQuery (ако искате да използвате изображения, не забравяйте, че трябва да посочите тяхната ширина и височина).
    
    Стъпка 2 - CSS
    
    След като създадем маркирането, ще започнем да му даваме стил. Добра идея е да използвате стилове, сякаш нямате пагинация, тъй като приставката зависи от JavaScript. Това означава, че има вероятност някои потребители да не могат да видят и следователно да използват вашата навигация за страници.
    
    styles.css – Част 1
    #main( /* Главният контейнер div */ position:relative; margin:50px auto; width:410px; background:url("img/main_bg.jpg") repeat-x #aeadad; border:1px solid #CCCCCC; padding :70px 25px 60px; /* CSS3 заоблени ъгли */ -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px; ) #holder( /* Неподреденият списък, който трябва да бъде разделен в страници */ width:400px; overflow:hidden; position:relative; background:url("img/dark_bg.jpg") repeat #4e5355; padding-bottom:10px; /* CSS3 вътрешна сянка (уеб комплектът е отбелязан, защото Google Chrome не харесва заоблени ъгли, комбинирани с вмъкнати сенки): */ -moz-box-shadow:0 0 10px #222 вмъкване; /*-webkit-box-shadow:0 0 10px #222 вмъкване;*/ box- shadow:0 0 10px #222 inset; ) .swControls( position:absolute; margin-top:10px; )
    Първо, нека стилизираме блока. основени неподреден списък (последният е присвоен id = притежател).
    
    Забележете, че използваме ефекта на сянка в CSS3 с атрибута вмъкванеза симулиране на вътрешна сянка. Както при повечето CSS3 правила, все още трябва да посочим правилата отделно за конкретни браузъри: Mozilla engine (Firefox) и Webkit engine (Safri и Chrome).
    
    Може да сте забелязали, че версията на webkit е коментирана. Това се дължи на грешка при рисуване на сенки в Chrome при използване на това свойство едновременно със свойството граница-радиус(сенките се създават така, сякаш блокът има правилни ъгли, пренебрегвайки техните фили и следователно разрушавайки ефекта).
    
    styles.css – Част 2
    A.swShowPage( /* Връзките, които инициират слайда на страницата */ background-color:#444444; float:left; height:15px; margin:4px 3px; text-indent:-9999px; width:15px; /*border: 1px плътен #ccc;*/ /* CSS3 заоблени ъгли */ -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; ) a.swShowPage:hover, a.swShowPage.active ( background-color:#2993dd; /* CSS3 вътрешна сянка */ -moz-box-shadow:0 0 7px #1e435d inset; /*-webkit-box-shadow:0 0 7px #1e435d inset;*/ box-shadow :0 0 7px #1e435d inset; ) #holder li( background-color:#F4F4F4; list-style:none outside none; margin:10px 10px 0; padding:20px; float:left; /* Редовни CSS3 сенки на кутии (не вмъкване): */ -moz-box-shadow:0 0 6px #111111; -webkit-box-shadow:0 0 6px #111111; box-shadow:0 0 6px #111111; ) #държател, #държател li( / * Прилагане на заоблени ъгли както към държача, така и към държача */ -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; ) .clear( /* Този клас изчиства плаващите елементи */ ясно:и двете; )
    
    Класът допълва кода ясно, използван за нулиране на обвиването на елементи.
    
    Стъпка 3 - jQuery
    
    За последната част от урока трябва да включим най-новата версия на библиотеката jQuery на страницата. От гледна точка на производителността е разумно да включите целия външен JavaScript непосредствено преди затварящия маркер body, тъй като скриптовете блокират изобразяването на страницата.
    
    script.js – Част 1
    (function($)( // Създаване на приставката sweetPages jQuery: $.fn.sweetPages = function(opts)( // Ако не са предадени опции, създайте празен обект opts if(!opts) opts = (); var resultsPerPage = opts.perPage || 3; // Добавката работи най-добре за неподредени списъци, // въпреки че OL биха се справили също толкова добре: var ul = this; var li = ul.find("li"); li.each(function ()( // Изчисляване на височината на всеки елемент // и съхраняването му с метода за данни: var el = $(this); el.data("height",el.outerHeight(true)); )); / / Изчисляване на общия брой страници: var pagesNumber = Math.ceil(li.length/resultsPerPage); // Ако страниците са по-малко от две, не правете нищо: if(pagesNumbermaxHeight) maxHeight = tmpHeight; totalWidth+=elem.outerWidth( ) ; elem.css("float","left").width(ul.width()); )); swPage.wrapAll(""); // Задаване на височината на ul на височината на най-високата страница: ul.height(maxHeight); var swSlider = ul.find(".swSlider"); swSlider.append("").width(totalWidth); var hyperLinks = ul.find("a.swShowPage"); hyperLinks.click(function(e)( // Ако се щракне върху една от контролните връзки, плъзнете div swSlider // (който съдържа всички страници) и го маркирайте като активен: $(this).addClass("active") .siblings().removeClass("active"); swSlider.stop().animate(("margin-left": -(parseInt($(this).text())-1)*ul.width()) ,"бавно"); e.preventDefault(); )); // Маркирайте първата връзка като активна при първото изпълнение на кода: hyperLinks.eq(0).addClass("active"); // Центрирайте контролния div: swControls.css(( "left":"50%", "margin-left":-swControls.width()/2 )); върнете това; )))(jQuery);
    Във втората част на скрипта преминаваме през новосъздадените страници, оразмеряваме ги и ги настройваме да плават наляво. В процеса на това намираме "най-високата" страница и в съответствие с това задаваме височината на елемента