Автор

19 04.2013
Нумерация страниц на сайте с помощью 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;
}

 

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

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

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


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

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


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

На некоторых сайтах вы, наверное, не разе замечали так называемые «Хлебные крошки», которые сохраняют путь пройденного вами пути на сайте. Это достаточно удобно, ведь позволяет быстро вернуться в необходимый раздел сайта. Но зачастую такие крошки достаточно не приметные, и пользователь не обращает на них внимание, при этот данный элемент на сайте теряет свою значимость. В данном уроке мы рассмотрим как стилизовать данные следы на сайте, чтобы они отлично привлекали взор посетителя и при этом выполняли свое задание.


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

Простая навигация, которая автоматически скрывается, когда пользователь прокручивается вниз и становится видимой, когда пользователь прокручивается вверх.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close