Автор

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



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

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

Меня зовут Сергей Целовальников, я являюсь руководителем студии «Studio Dtsign», в простонародье и в поисковых системах «Студия Целовальникова Сергея». Также я являюсь оффициальным партнером компании UMI.CMS в области разработки сайтов и веб дизайна, с богатым портфолио работ, созданных на этой системе управления сайтами.

О… UMI.CMS

Работа со многими бесплатными и иже с ними CMS-системами управления сайтов, коих я повидал немало до UMI, часто приходил к констатации фактов о наличии всяческих недостатков и пожинанию «плодов» бесплатного софта. И самый безобидный из них – «костность», негибкость, стандартная блочная систем и необходимость создания всех последующих страниц в единственном шаблоне дизайна сайта.......

 


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

Анимация с поддержкой CSS, которая заменяет обновление страницы при обновлении контента с помощью jQuery.


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

У вас раньше появлялось неприятное чувство, когда ваши подписи плохо походили к цветам кнопок, панелей, или просто текст слабо контрастировал с фоном страницы? С помощью CSS тени эту проблему легко решить, используя свойство text-shadow, чтобы улучшить читабельность и контрастность текста.


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

Скорее всего, нет веб-проекта, который не связан с созданием всплывающего сообщения: является ли это подтверждением удаления элемента или добавления элемента в корзину, всплывающие сообщения всегда являются частью сайта.


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close