Создавая сайт вручную с нуля можно столкнуться с множеством мелких нюансов, без которых сайт с множеством информации, пожалуй, не сможет обойтись, речь идет о нумерации страниц на сайте. И в сегодняшнем уроке мы расскажем как это можно сделать с помощью небольшого плагина jQuery. В данной нумерации доступны кнопки перехода к первой, последней, следующей и предыдущей страницам и возвратная функция, которая запускается после перехода к введеному номеру, что весьма удобно для навигации по сайту.

jqPagination — плагин jQuery, который реализует новый метод нумерации страниц на сайте. Вместо вывода списка страниц jqPagination использует интерактивный блок вида ‘Страница 1 из 5’, который позволяет пользователю выбрать нужную страницу. Плагин проверяет введенный номер страницы.

Особенности плагина:

  • Независимый дизайн
  • Простая настройка
  • Легкая интеграция с приложением/сайтом
  • Использует jQuery

Для начала нам необходимо подключить фреймворки, не забывайте правильно указывать пути к ним для правильной работы:

Чтобы установить данную навигацию нужно разместить данный HTML-код в необходимую позицию документа:

Затем инициализуем плагин для введенного элемента:

Некоторые опции плагина можно редактировать под свой вкус, вот некий перечень этих опций:

  • current_page — текущая страница при запуске, по умолчанию: 1. Также можно использовать data атрибут current-page в элементе ввода.
  • link_string — строка адреса, которая устанавливается в атрибуте href ссылки на страницу, по умолчанию: Можно использовать {page_number} для подстановки в адрес номера страницы для формирования правильной сссылки на документ.
  • max_page — максимальное количество страниц, по умолчанию: null. Если установлено значение null, то будет использоваться data атрибут max-page. Если никаких значений не задано, считается. что страница одна.
  • page_string — строка в полее ввода, по умолчанию: ‘Page {current_page} of{max_page}’. Используйте {current_page} и {max_page} для вывода в строке номера текуще страницы и максимального количества старниц.

 И последним этапом будут стили CSS, вот как они выглядят:

 Вот и все, наша навигация готова. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.