Нумерация страниц на сайте с помощью jQuery Нумерация страниц на сайте с помощью jQuery



 

Создавая сайт вручную с нуля можно столкнуться с множеством мелких нюансов, без которых сайт с множеством информации, пожалуй, не сможет обойтись, речь идет о нумерации страниц на сайте. И в сегодняшнем уроке мы расскажем как это можно сделать с помощью небольшого плагина 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 и представлен исключительно в ознакомительных целях.


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!