Создавая сайт вручную с нуля можно столкнуться с множеством мелких нюансов, без которых сайт с множеством информации, пожалуй, не сможет обойтись, речь идет о нумерации страниц на сайте. И в сегодняшнем уроке мы расскажем как это можно сделать с помощью небольшого плагина jQuery. В данной нумерации доступны кнопки перехода к первой, последней, следующей и предыдущей страницам и возвратная функция, которая запускается после перехода к введеному номеру, что весьма удобно для навигации по сайту.
jqPagination - плагин jQuery, который реализует новый метод нумерации страниц на сайте. Вместо вывода списка страниц jqPagination использует интерактивный блок вида 'Страница 1 из 5', который позволяет пользователю выбрать нужную страницу. Плагин проверяет введенный номер страницы.
Особенности плагина:
Независимый дизайн
Простая настройка
Легкая интеграция с приложением/сайтом
Использует jQuery
Для начала нам необходимо подключить фреймворки, не забывайте правильно указывать пути к ним для правильной работы:
<script type="text/javascript" src="./js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.jqpagination.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>
Чтобы установить данную навигацию нужно разместить данный HTML-код в необходимую позицию документа:
<div><a href="#" data-action="first">«</a>
<a href="#" data-action="previous">‹</a>
<input type="text" readonly="readonly" data-max-page="40" />
<a href="#" data-action="next">›</a>
<a href="#" data-action="last">»</a></div>
Затем инициализуем плагин для введенного элемента:
$('.pagination').jqPagination({
paged: function(page) {
// выполняем операции с номером страницы
}
});
Некоторые опции плагина можно редактировать под свой вкус, вот некий перечень этих опций:
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, вот как они выглядят:
.pagination {
float: left;
border: 1px solid #CDCDCD;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.pagination a {
float: left;
height: 50px;
width: 20px;
background-color: rgb(0,50,75);
color: #8fa81f;
text-align: center;
text-decoration: none;
font-family: Times, 'Times New Roman', Georgia, Palatino;
font-weight: bold;
font-size: 16px;
outline: none;
vertical-align: middle;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(221,221,221)),
color-stop(1, rgb(243,243,243))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(221,221,221) 0%,
rgb(243,243,243) 100%
);
}
.pagination a:hover, .pagination a:focus, .pagination a:active {
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #CECECE),
color-stop(1, #E4E4E4)
);
background-image: -moz-linear-gradient(
center bottom,
#CECECE 0%,
#E4E4E4 100%
);
}
.pagination a:first-child {
border-radius: 2px 0 0 2px;
-moz-border-radius: 2px 0 0 2px;
-webkit-border-radius: 2px 0 0 2px;
}
.pagination a:last-child {
border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
-webkit-border-radius: 0 2px 2px 0;
}
.pagination a {
border-right: 1px solid #CDCDCD;
border-left: 1px solid #CDCDCD;
}
.pagination a:first-child {
border: none;
}
.pagination a:last-child {
border: none;
}
.pagination input {
border: none;
float: left;
text-align: center;
height: 20px;
outline: none;
vertical-align: middle;
width: 120px;
padding: 0;
margin: 0;
}
/* Класс gigantic предназначен для демонстрации */
.gigantic.pagination {
margin: 30px 0;
}
.gigantic.pagination a {
height: 60px;
width: 60px;
font-size: 50px;
line-height: 50px;
}
.gigantic.pagination input {
width: 300px;
height: 60px;
font-size: 30px;
}
Вот и все, наша навигация готова. Материал взят из зарубежного источника - beneverard.github.com/jqPagination и представлен исключительно в ознакомительных целях.