SimplePagination.js — Легкий jQuery плагін для створення пагинации

41

Пагинация, а якщо поптросту — посторінкова навігація, важливий елемент будь-якого мало-мальськи наповненого сайту. Різні системи управління сайтом, в більшості своїй, мають вбудовані інструменту для реалізації пагинации. Так само існує маса окремих плагінів, написаних під цю корисну справу, в більшості випадків вони побудовані з використанням бібліотеки jQuery. Всі ці плагіни, різні і за стилем і за функціональними можливостями, але головне все вони, це прекрасна альтернатива для серверної реалізації розбивки об’ємного вмісту сайтів на сторінки.

Пропоную на розгляд, на мій погляд, один з найлегших jQuery плагіни для створення посторінкової навігації, яка допоможе вам організувати, привабливу і швидку нумерацію сторінок.

SimplePagination.js

jQuery плагин для создания пагинации

Дуже легкий у всіх відносинах, і по вазі, і все що стосується підключення, налаштування, жвавий плагін jQuery для створення нумерації сторінок, укомплектований трьома стилями оформлення, і заряджений на підтримку Bootstrap.

До речі, якщо вас не влаштують стандартні стилі, можете використовувати Набір стилів пагинации на CSS3, який не складе великої праці прикрутити в .css плагіна.

Стили постраничной навигации

Тепер, давайте більш докладно розглянемо, як правильно підключити сам плагін та стильовий файл до документа, тобто безпосередньо впровадити його на сторінки сайту, і пройдемося по доступним налаштувань плагіна.

Для початку, звичайно ж потрібно отримати плагін, тобто Завантажити Архів » з исходниками, який дбайливо упаковані сам jquery, javascript і файл стилів css.

Розглянемо покроково, як використовувати плагін:

Крок 1. Підключення jQuery

В тілі сторінки в розділ … необхідно підключити фреймворк jQuery, бажано версії 1.7.2, або більш свіжої, зробити це можна використовуючи спеціальне сховище Google:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

Або скористатися бібліотекою JQuery з архіву, попередньо помістивши її в папку з javascript у вас на сайті:

<script type="text/javascript" src="папка з js/jquery.min.js">

Якщо у вас на сайті jQuery вже включений і щосили працює, всі рухи описані вище, можете сміливо пропустити, головне слідкуйте за тим, що б версія jQuery, не була занадто дрімучої. В WordPress, до речі, з цим все в порядку.
Далі, підключаємо нашу робочу конячку — плагін jquery.simplePagination.js:

<script type="text/javascript" src="папка з js/jquery.simplePagination.js">

Крок 2. Підключення CSS

Щоб панель пагинации виглядала належним чином, у відповідності із загальним дизайном, включає в роботу файл simplePagination.css з архіву, з трьома варіаціями оформлення нумерації сторінок:

<link type="text/css" rel="stylesheet" href="css/simplePagination.css"/>

Можна не городити город, а просто вибрати потрібний вам стиль, світлий, темний або компактний і вставити набір правил у файл стилів .css вашого шаблону. Прописати свої власні стилі або скористатися Bootstrap, теж варіант, в плані оригінальності і розвитку навичок сайтобудування, навіть більш кращий.

Крок 3. HTML

Щоб вивести панель посторінкової навігації на сторінках сайту, там де ви плануєте її розмістити, логічніше і найчастіше, це внизу основного змісту, слід прописати наступне:
Для світлого фону:

<div id="light-pagination" class="pagination"></div>

Для пагинации на темному тлі:

<div id="dark-pagination" class="pagination"></div>

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

<div id="compact-pagination" class="pagination"></div>

Крок 4.Ініціалізація плагіна

Після готовності документа, все що нам залишається зробити, це запустити плагін:

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

$(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».

Ми розглянули основні настройки. Про додаткові функції і доступні методи застосування цього плагіна, ви можете дізнатися вивчивши документацію безпосередньо на сторінці розробника.

Мені залишається тільки побажати вам удачі та успіхів в роботі над вашими новими проектами.

*driver*

Джерело: flavius matis

Буду вдячний, якщо поділитеся посиланням на цю запис у своїх соц.мережах: