Пагінація, а якщо поптросту - посторінкова навігація, важливий елемент будь-якого більш-менш наповненого сайту. Різні системи управління сайтом, здебільшого, мають вбудовані інструменти для реалізації пагінації. Також існує маса окремих плагінів, написаних під цю корисну справу, в більшості випадків вони побудовані з використанням бібліотеки. Всі ці плагіни, різні і за стилем виконання та за функціональними можливостями, але головне всі вони, це чудова альтернатива серверній реалізації розбивки об'ємного змісту сайтів на сторінки.
Пропоную на розгляд, на мій погляд, один з найлегших jQuery плагінів для створення посторінкової навігації, який допоможе вам організувати, привабливу і швидку нумерацію сторінок.
Дуже легкий, у всіх відношеннях, і за вагою, і все, що стосується підключення, налаштувань, швидкий для створення нумерації сторінок, укомплектований трьома стилями оформлення і заряджений на підтримку.
До речі, якщо вас не влаштують стандартні стилі, можете використовувати , який не складе великої праці прикрутити в .cssплагіна.
Тепер, давайте докладніше розглянемо, як правильно підключити сам плагін і стильовий файл до документа, тобто безпосередньо впровадити його на сторінки сайту, і пройдемося по доступним параметрам плагіна.
Для початку, звичайно ж потрібно мати плагін, тобто з вихідними джерелами, в який дбайливо упаковані сам jquery javascript і файл стилів css.
Розберемо покроково, як використовувати плагін:
Крок 1. Підключення jQuery
У тілі сторінки у розділ
...необхідно підключити фреймворк jQuery, бажано версії 1.7.2, або свіжішою, зробити це можна за допомогою спеціального сховища Google:Якщо у вас на сайті jQuery вже включений і працює, всі рухи тіла описані вище, можете сміливо пропустити, головне стежте за тим, щоб версія jQuery, не була занадто дрімучою. У WordPress, до речі, з цим усе гаразд.
Далі, підключаємо нашого робочого конячка — плагін jquery.simplePagination.js:
Можна не городити город, а просто вибрати потрібний стиль, світлий, темний або компактний і вставити набір правил у файл стилів.css вашого шаблону. Прописати свої власні стилі або скористатися Bootstrap, теж варіант, у плані оригінальності та розвитку навичок сайтобудування, навіть кращий.
Крок 3. HTML
Щоб вивести панель сторінкової навігації на сторінках сайту, там де ви плануєте її розмістити, логічніше і найчастіше, це внизу основного змісту слід прописати наступне:
Для світлого фону:
Компактна тема:
$(function() ( $(#light-pagination).pagination(( items: 100, itemsOnPage: 10, cssStyle: "light-theme" )); ));
У прикладі я використав ініціалізацію для пагінації світлої теми #light-pagination , ви можете змінити селектор на інший, для компактного це #compact-pagination , або для темного стилю #dark-pagination . Не забувайте в такому разі міняти і клас у функції cssStyle.
Кая я вже писав вище, плагін дуже гнучкий в налаштуваннях, для зміни доступні такі опції:
- items— Загальна кількість елементів, які будуть використовуватись для розрахунку сторінок. За замовчуванням: 1 .
- itemsOnPage— Кількість елементів, які відображаються на кожній сторінці. За замовчуванням: 1 .
- pages- Опціонально. Якщо вказано значення, опції items і itemsOnPage ігноруються. Встановлює кількість сторінок у списку.
- displayedPages— Скільки номерів сторінок має бути видно під час навігації. Мінімально допустиме значення: 3 , за замовчуванням: 5 .
- edges— Скільки номерів сторінок видно на початку та наприкінці нумерації. За замовчуванням значення: 2 .
- currentPage— Яку сторінку буде обрано відразу після запуску. Логічно, за замовчуванням значення: 1 .
- hrefTextPrefix— Рядок, що використовується в атрибуті HREF, додається перед номером сторінки. За замовчуванням: "#page-".
- hrefTextSuffix— Рядок, що використовується в атрибуті HREF, вставляється після номера сторінки. За промовчанням порожній рядок.
- prevText- Текст кнопки на попередню сторінку. За замовчуванням: "Prev".
- nextText— Текст кнопки на наступній сторінці. За замовчуванням: "Next"
- cssStyle- Визначать стиль CSS. За замовчуванням: "light-theme"
- selectOnClick— Вибір сторінки після натискання, за замовчуванням — увімкнено( true), навіщо відключати так і не зрозумів, але така можливість є значення: «false».
Ми розглянули основні настройки. Про додаткові функції та доступні методи застосування цього плагіна, можете дізнатися вивчивши документацію безпосередньо на сторінці розробника.
Мені залишається тільки, побажати вам удачі та успіхів у роботі над вашими новими проектами.
- Ви можете використовувати touch and mouse swipe navigation
- Ви можете використовувати різні види сторінок зміни
- State of active page is saved in the History API
- Ви можете використовувати різні параметри: номери, позначки, пункт, прогрес bar, і поля для введення зайняли сторінку
- Ви можете використовувати одну з ready-made themes
- Ви можете вказати на те, що немає тільки тексту, а також зображення або листи
- Використовуючи велику кількість різних параметрів і методів, ви можете створити candy instead of boring text
SETS OF CONTROL ELEMENTS
Класична Pagination складається з набору кнопок, таких як "Home", "Перевід", "Next", "Last page" button, і курси - сторінка номерів. Also consists a block of page status. Її елемент є окремим і індивідуальним елементом, який може бути розписаний будь-де на сторінці або не відображається на всіх.
Натисніть на кнопку, щоб завантажити сторінку - введіть сторінку номера в box and click "OK".
Цей set is perfect navigation suitable for a number of pages, when enough simply turn the pages back and forth
Це most minimalist view of controls, similar to the one that you used to see in the sliders.
Цей контроль є useful, якщо ви потребуєте, щоб отримати доступ до всіх сторінок. Цей вид контролю є важливим для великого тексту, і для малих повідомлень
Цей вид контролю є мінімальним шляхом до absence of buttons with page numbers.
Це є стильний і сучасний перегляд управління сторінками. Це так дуже маленький простір, але це дуже функціональний.
Це не є стандартним типом pagination. With it is possible to estimate the відсоток readed pages.
Управління елементами не потрібне для перегляду. Ви можете автоматично запустити будь-який контроль за будь-якою місцезнаходженням коду, але це необхідно для особливих необмежених слів pagination block в data-href attribute, і transition identifier. Як control button, ви можете використовувати будь-який html елемент: a, button, span, div, img and other.
Це керування параметрами комбінації класичного перегляду і блоку для перемикання тексту на конкретну сторінку.
TYPE OF CONTENTS
Якщо ви використовуєте модуль, який містить тільки текстові текстові тексти, текст буде розрізнений в частини, доки, якщо вони є в тексті. Якщо текст не є пунктами, для виділення тексту ви потребуєте в особливості параметра в параметрі "splitSymbols", так як space, letter, or other
Якщо ви використовуєте заголовок для блоку, який містить позначки статей або інші html tags з текстом, текст буде розрізнений в частині цього html tags.
Plugin equally well splits on page as tags for formatting text and image tags. Keep an eye on the behavior of the image height using CSS styles
list is splitted as other tags. The most important thing is that the List of elements is a child of the initalization element
MORE DEMOS
На одній сторінці можна назвати several blocks with page navigation. And each of this blocks can have your settings
Цей параметр specifies the number of the page to be displayed after the first download site
Reg.ru: домени та хостинг
Найбільший реєстратор та хостинг-провайдер у Росії.
Понад 2 мільйони доменних імен на обслуговуванні.
Просування, пошта для домену, рішення для бізнесу.
Понад 700 тис. клієнтів у всьому світі вже зробили свій вибір.
*Наведіть курсор миші, щоб зупинити прокручування.
Назад вперед
Розумні сторінки: Посторінкова навігація (Pagination) засобами jQuery
Розбивка контенту деякі сторінки (pagination) - звичайне рішення під час роботи з великими обсягами інформації. Реалізується це за допомогою передачі номера потрібної сторінки додаткового оброблювача, який витягує інформацію з бази і повертає її у певній формі. Трудомісткий процес, але це неминуче зло. Чи ні?
Хіба не було б зручно при роботі з невеликими обсягами інформації мати контент вже підготовленим заздалегідь, при цьому чітко організований і легко доступний?
Зараз ми з вами робитимемо рішення на jQuery, яке дозволить нам конвертувати звичайний невпорядкований список елементів у дружній для пошукових системнабір сторінок із легкою навігацією. Даний плагін можна використовувати для коментарів, слайдшоу або іншого типу структурованого контенту.
Концепція
Під час виклику плагін розбиває елементи
- , якому задана властивість overflow:hidden. Генерується певна кількість навігаційних посилань, які переміщують до зони видимості відповідну сторінку з елементами
- .
Подивіться на ілюстрацію нижче, щоб краще зрозуміти ідею.
Крок 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...
Блок mainвиступає в ролі контейнера для розбитого на сторінці елемента
- , і до нього застосовано світло-сірий фон. Невпорядкований список містить елементи.
- будь-який контент, тому що розміри автоматично вираховуються jQuery (якщо ви хочете використовувати картинки - пам'ятайте, що потрібно вказати їх ширину і висоту).
Крок 2 – CSS
Після створення розмітки займемося надання їй стильового оформлення. Хороша ідея - використовувати стилі так, ніби у вас немає цієї посторінкової навігації, так як плагін залежить від JavaScript. Це означає, що є ймовірність того, що деякі користувачі не зможуть побачити вашу сторінкову навігацію і, відповідно, скористатися нею.
styles.css – Частина 1
#main( /* The main container 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( /* into pages */ width:400px; overflow:hidden; position:relative; background:url("img/dark_bg.jpg") repeat #4e5355; because Google Chrome does not like rounded corners combined with inset shadows): */ -moz-box-shadow:0 0 10px #222 inset; /*-webkit-box-shadow:0 0 10px #222 inset;*/ box-shadow:0 0 10px #222 inset; ) .swControls( position:absolute; margin-top:10px; )
Насамперед надаємо стиль блоку mainта неупорядкованому списку (останньому присвоєно id = holder).
Зауважте, що ми використовуємо ефект тіні в CSS3 з атрибутом insetдля імітації внутрішньої тіні. Як і у випадку з більшістю правил CSS3, нам все ще необхідно вказувати правила окремо для певних браузерів: з двигуном Mozilla (Firefox) та Webkit (Safri та Chrome).
Ви могли звернути увагу на те, що версія для webkit закоментована. Це пов'язано з багом при відмальовуванні тіней в Chrome при одночасному використанні даної властивості. border-radius(тіні створюються так, якби блок мав прямі кути, ігноруючи їх заокруглення і, отже, псуючи ефект).
styles.css – Частина 2
A.swShowPage( /* The links that initiate the page slide */ background-color:#444444; float:left; height:15px; margin:4px 3px; text-indent:-9999px; width:15px; /*border: 1px solid #ccc;*/ /* CSS3 rounded corners */ -moz-border-radius:7px;-webkit-border-radius:7px; border-radius:7px; ( background-color:#2993dd; /* CSS3 inner shadow */ -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; inset): */ -moz-box-shadow:0 0 6px #111111; -webkit-box-shadow:0 0 6px #111111; * Applying rouded corners to both the holder and the holder lis */ -moz-border-radius:8px;-webkit-border-radius:8px; border-radius:8px; */ clear:both; )
Завершує код клас clear, що використовується для скидання обтікання елементів.
Крок 3 – jQuery
У завершальній частині уроку нам потрібно включити на сторінку останню версіюбібліотеки jQuery. З точки зору продуктивності мудро включати всі зовнішні яваскрипти безпосередньо перед тегом body, що закриває, так як скрипти блокують рендеринг (відмальовку) сторінки.
script.js – Частина 1
(function($)( // Creating the sweetPages jQuery plugin: $.fn.sweetPages = function(opts)( // If no options were passed, create an empty opts object if(!opts) opts = (); var resultsPerPage = Опти. ()( // Calculating height of each li element, // and storing it with the data method: var el = $(this); el.data("height",el.outerHeight(true)); )); // Визначення загальної кількості сторінок: var pagesNumber = Math.ceil(li.length/resultsPerPage);<2) return this; // Creating the controls div: var swControls = $("
"); for(var i=0;iСтворення JQuery-плагін не так складно, як ви могли подумати. Нам потрібно створити нову функцію як властивість jQuery.fn(або $.fn, як зазначено тут. Покажчик thisЦя функція вказує на оригінальний об'єкт JQuery.
Потім ми підраховуємо загальну кількість сторінок функцією Math.ceil(). Вона округляє отриманий результат у бік до найближчого цілого числа, яке дає нам правильне число сторінок.
Тепер, коли ми маємо загальну кількість сторінок, ми можемо пройтись циклом forпо всіх елементах
- , розбиваючи їх на окремі групи та обрамляючи їх у блок swPage, формуючи таким чином сторінки. Пам'ятайте, що виклик методу slice()в jQuery створює нову групу елементів, залишаючи вихідний набір незайманим (інакше в кожній ітерації циклу ми починали б з вихідного набору елементів
- ).
script.js – Частина 2
Var maxHeight = 0; var totalWidth = 0; var swPage = ul.find(".swPage"); swPage.each(function()( // Looping through all the newly created pages: var elem = $(this); var tmpHeight = 0; elem.find("li").each(function()(tmpHeight+=$( this).data("height");));if(tmpHeight>maxHeight) maxHeight = tmpHeight; totalWidth+=elem.outerWidth(); ));)); swPage.wrapAll("
"); // Setting the height of the ul to the height of the thread page: ul.height(maxHeight); var swSlider = ul.find(".swSlider"); swSlider.append(" ").width(totalWidth); var hyperLinks = ul.find("a.swShowPage"); contains all the pages) і mark it as active: $(this).addClass("active").siblings().removeClass("active"); swSlider.stop().animate(("margin-left": - (parseInt($(this).text())-1)*ul.width()),"slow"); e.preventDefault(); )); runs: hyperLinks.eq(0).addClass("active"); // Center the control div: swControls.css(( "left":"50%", "margin-left":-swControls.width()/ 2 ));return this; )))(jQuery);У другій частині скрипту ми проходимо в циклі за новими створеними сторінками, встановлюємо їм розміри та задаємо, щоб вони обтікали ліворуч. У процесі цього ми знаходимо найвищу сторінку і, відповідно, встановлюємо висоту елемента
- .
Ми також укладаємо сторінки в блок swSlider, який досить широкий для того, щоб відобразити їх "пліч-о-пліч". Далі ми відстежуємо подію кліка за навігаційними посиланнями та переміщуємо блок swSliderметодом animate. Це створює ефект ковзання (слайдингу), який ви бачите у демо.
script.js – Частина 3
$(document).ready(function()( /* The following code is executed once the DOM is loaded */ // Calling jQuery plugin and splitting the // #holder UL inpages of 3 LIs each: $("# holder "). ").detach(); controls.appendTo("#main"); ));
В останній частині коду ми просто викликаємо плагін і передаємо налаштування perPage(кілька елементів на сторінку відображати). Також зверніть увагу на використання методу detach, введений у jQuery 1.4. Він видаляє елементи з DOM (Об'єктної Моделі Документу), але залишає незайманими всі "прослуховувачі" подій. Це дозволяє нам винести керуючі посилання за межі елемента
- , де вони були спочатку, зберігаючи у своїй необхідну функціональність.
jQuery-плагіни для створення посторінкової навігації – це скрипти, які можна інтегрувати на ваш сайт для поділу сторінок та повідомлень на кілька окремих сторінок. В основному є два способи створення нумерації сторінок сайту. Або за допомогою плагіна, який поділяє дані на кілька сторінок після завантаження сторінки, або за допомогою серверного скрипта, де необхідний обсяг даних витягується з бази даних, а потім завантажується на сторінку. Розбивка на сторінки може бути гарним способомзбільшити кількість переглядів сторінок на вашому сайті, і таким чином також покращити показник відмов та інші поведінкові фактори, що враховуються пошуковими системами.
Якщо у вас на сторінках великий обсяг даних, то плагіни для створення посторінкової навігації допоможуть привести контент більш зручний вид для відвідувачів. У цій статті ми поділимося з вами деякими плагінами, які допоможуть вам створити потрібні налаштуваннянумерації сторінок на ваших веб-сайтах. Більшість цих плагінів безкоштовні, і їх можна вбудувати в будь-який дизайн.
Це відмінний jQuery-плагін від Remy Elazare, який поєднує в собі нумерацію сторінок і прокручування, в простому інтерфейсі користувача.
jPaginate
jPaginate- jQuery-плагін для створення нумерації сторінок, що має одну особливість: анімовані номери сторінок. Користувач може прокручувати доступні номери сторінок, натиснувши або просто навівши курсор миші на стрілку. Посилання на першу та останню сторінки також доступні.
Pajinate
Pajinate- простий та гнучкий jQuery-плагін, який дозволяє розділити довгі списки або зміст на кілька окремих сторінок. Це не проста альтернатива серверної реалізації, час завантаження сторінок між посторінковими переходами практично дорівнює нулю (при розумному розмірі сторінки, звичайно).
Простий плагін jQueryдля створення нумерації сторінок із трьома CSS-темами.
jPList
jPListє гнучкий jQuery-плагін для сортування, нумерації сторінок і фільтрації будь-якої HTML-розмітки (DIV, UL/LI, таблиці і т.д.) - преміум плагін від CodeCanyon.
Цей плагін створює просте сортування контенту та дозволяє вам керувати вашим контентом за допомогою нумерації сторінок! Simple Content Sorting забезпечує простий спосіб прикрасити ваш інтерфейс, надаючи зручний механізм сортування. - Преміум плагін він CodeCanyon
Easy Paginate
Цей плагін дозволяє легко переглядати список елементів з розбиттям на сторінки. Він дуже простий у реалізації і дуже легкий, так що може стати в нагоді для використання у власних проектах.
SimplePager
SimplePagerдозволяє створювати нумерацію сторінок з мінімальними зусиллями та конфігурацією, наскільки це можливо. Цей плагін може розбивати на сторінки діви, параграфи, елементи списку та майже будь-який інший контент.
JQuery-плагін, який надає новий методрозбиття на сторінки для вашого веб-сайту або програми. Замість того, щоб виводити список номерів сторінок, як у традиційних методах, jqPagination використовує інтерактивне виведення нумерації сторінок, наприклад "1 з 5 сторінок", при виборі плагін дозволяє користувачеві ввести потрібний номер сторінки. Посилання "перша сторінка", "попередня", "наступна" та "остання" встановлені за замовчуванням, але їх можна вимкнути.
Якщо у вас є великий список елементів (наприклад, результати пошуку або новини, статті), ви можете згрупувати їх по окремих сторінках і додати елементи навігації за допомогою цього плагіна.
Ще один jQuery-плагін для створення старовинної навігації. Він привабливий, інтуїтивно зрозумілий, поставляється з повзунком для прокручування сторінок, і ви можете додати необмежену кількість сторінок.
jQuery-плагін для створення нумерації сторінок (за різним змістом), що ґрунтується не на кількості елементів на сторінці, а на висоті області з контентом.
Smart Paginator
Smart Paginatorє багатофункціональним jQuery-плагіном для посторінкової навігації, який робить додавання нумерації сторінок дуже простим завданням, і він також добре настроюється. Smart Paginator може автоматично фільтрувати дані на стороні клієнта.
Як можна здогадатися із назви, використовує Ajax для створення посторінкової навігації на вашому сайті. Він завантажуватиме лише певну частину, а не всю сторінку, таким чином прискорюється час завантаження сайту.
Sweet Pages
Sweet Pages- це jQuery-плагін, який дозволить вам перетворити звичайний невпорядкований список елементів на зручний набір сторінок з навігацією. Він може бути використаний для коментарів, слайд-шоу або будь-якого іншого виду структурованого контенту.
Якщо у Вас виникли питання, то для якнайшвидшого отримання відповіді рекомендуємо скористатися нашим
Сайти, як правило, містять кілька сторінок. На них може розташовуватися як 3-5 сторінок, наприклад, на landing-page, а може бути і більше, набагато більше.
Кожен добрий сайт повинен містити в собі навігацію, яка дозволить користувачеві правильно орієнтуватися та переміщатися між сторінками сайту. Створити таку пагінацію можна за допомогою JavaScript. У цій статті ми поговоримо про створення такої навігації.
Ще один момент, окрім звичайного JavaScript, у прикладі використовується Bootstrap 4. Його компонент bootstrap pagination поєднується з бібліотекою JQuery, а саме спеціальним плагіном Buzina Pagination. Він дозволяє розбивати всю інформацію на кілька сторінок із створенням навігації між ними.
Підключення необхідних фреймворків
Щоб працювати з Bootstrap та JQuery, їх потрібно підключити. Це можна зробити у вашому HTML документі за допомогою тегів
У більшості ситуацій, ймовірно, дана розмітка генеруватиметься будь-яким фоновим скриптом, звільняючи вас від необхідності робити це вручну. Ви можете розміщувати всередині елементів
- усередині нього. Нижче наведено код із файлу demo.html, який ви знайдете в архіві з прикладом:
