Автор

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

 

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Фиксированная навигация, которая позволяет вашим пользователям получать доступ к меню в любое время, пока они испытывают ваш веб-сайт. Он меньше фиксированного заголовка полной ширины и заменяет кнопку «назад к началу» более умным решением UX.


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

Галерея-это универсальное средство, которое помогает красиво организовать картинки на сайте. Различный креативный подход к поставленному вопросу позволяет привлечь не только внимание пользователя к необходимому материалу, но и добавить изюминку на сайт. В данном уроке мы рассмотрим как создать достаточно простую и практичную галерею с эффектом скольжения изображений справа на лево при помощи jquery и небольших стилей css. Основная идея состоит в том, что фокусировка направлена на одно изображение, а при выборе другого происходит скольжение.


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

Хотите создать слайдер с миниатюрами изображений для Вашего сайта, да так чтобы они корректно отображались в браузерах и были адаптированы под изменения размеров окна обозревателя, тогда этот урок Вас должен заинтересовать. Для этого мы будем использовать Elastislide - плагин jQuery для адаптивной карусели, которая изменяет размер и алгоритм работы в соответствии с размером экрана. Если вставить карусель в контейнер с изменяющейся шириной, то и она будет изменять ширину.


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close