Постраничная навигация с использованием AJAX и jQuery. Часть 2

Постраничная навигация с использованием  AJAX  и jQuery

От автора: в прошлом уроке мы с Вами начали создавать постраничную навигацию для сайта. Но мы ее не закончили, выполнили только лишь разбиение общего количества статей на отдельные страницы и условились, что доступ к каждой странице возможен только лишь передавая через адресную строку переменную page и затем номер страницы. Согласитесь — это очень неудобно. Поэтому в данном уроке мы с Вами создадим навигационную панель, при помощи которой можно осуществить быстрое и удобное перемещение по страницам постраничной навигации.

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

скачать исходникискачать урок

1. Скачивание необходимых библиотек

Второй основной элемент навигационной панели – это горизонтальная полоса прокрутки, и для ее создания, мы воспользуемся стандартным виджетом библиотеки jQuery UI, под названием SLIDER.

Значит, первым делом необходимо скачать данную библиотеку, для этого переходим на официальный сайт библиотеки – jqueryui.com. Далее переходим на вкладку Download, для скачивания библиотеки. Как Вы знаете, скачать данную библиотеку можно в двух вариантах: в полном объеме, то есть с полным набором виджетов, эффектов и т.д., и в ограниченном объеме, то есть галочками отметить только те элементы, которые необходимо скачать. Мы так и поступим, поэтому отмечаем галочками все элементы, относящиеся к ядру библиотеки, затем виджет slider и оставляем отмеченными все визуальные эффекты.

Далее, необходимо выбрать цветовую схему библиотеки — либо стандартную из выпадающего списка, либо сгенерировать самостоятельно, перейдя по design a custom theme, и самостоятельно настроить цветовую схему в соответствии с Вашими потребностями в дизайне. После завершения всех правок, кликнем по ссылке Download theme , и возвращаетесь на предыдущую страницу. Теперь можете увидеть, что в выпадающем списке выделена надпись СustomTheme – значит, при скачивании библиотеки будет использоваться Ваша сгенерированная тема. Затем нажимаем по ссылке download и скачиваем архив с библиотекой.

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

css

js

development-bundle

В папке css – содержатся стили и папка с изображениями, для цветовой схемы, что мы выбрали при скачивании библиотеки. Скопируем файл со стилями и папку с изображениями к нам в папку с тестовым сайтом.

Далее папка js, в ней содержится непосредственно сама библиотека jQuery UI и собственно библиотека jQuery, без которой она просто не сможет работать. Скопируем две эти библиотеки, далее в папке с нашим тестовым сайтом, создадим папку js и в нее вставим две скопированные библиотеки.

В паке development-bundle – содержатся примеры использования данной библиотеки – они нам не нужны.
Теперь осталось только подключить две эти библиотеки и можно уже работать с ними. Поэтому открываем файл index.php и подключаем библиотеки:

<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.1.custom.js"></script>

Далее подключаем стили:

<link rel="stylesheet" href="css/jquery-ui-1.10.1.custom.css">

Теперь можно приступать к созданию навигационной панели.

2. Создание слайдера

Итак, первым делом, давайте в файле index.php, создадим несколько блоков, в которых будет располагаться навигационная панель. Сразу после открытия блока content добавляем следующий код:

<div class="load"></div>
		<?
		 if($number_pages) {
		 	echo "
				<div style='width:330px;height:40px;margin:0 auto;'>
					<a id='prev'></a>
					<div style='width:150px;float:left;margin-top:12px'>
						<div id='slider'></div>
					</div>
					<a id='next'></a>
					
				</div>
			
			";
		 }
		?>

Смотрите, блок с классом load необходим для информирования пользователя о том, что идет процесс обращения к серверу. При помощи стилей мы зададим фоном, для данного блока небольшую анимационную картинку (gif анимация), и в определенный момент будем данный блок показывать. Изначально, он будет скрыт.

Далее проверим, что записано в переменной $number_pages, если в данной переменной записано любое значение, кроме ЛОЖЬ (FALSE), то мы выводим на экран блок, в котором будет располагаться навигационная панель. Как Вы помните в переменной $number_pages – содержится количество страниц, необходимое для вывода на экран всех статей, хранящихся в базе данных. Но, если общее количество статей меньше, чем количество выводимых статей на одной странице, то в данную переменную попадет FALSE (помните, мы в функции number_pages() создавали специальное условие).

Далее выводим блок со стилями width:330px;height:40px;margin:0 auto — это общий контейнер, в нем будет располагаться весь блок с навигационной панелью. Внутри данного блока выводим ссылку id=’prev’ — это кнопочка для перехода к предыдущей странице. Затем выводим блок, в котором будет располагаться горизонтальная полоса прокрутки (slider) , ему, конечно, необходимо задать свойство float:left, что бы расположить в одну линию со ссылкой (id=’prev’). И, конечно же, ссылка id=’next’, для перехода к следующей странице.

Теперь в файл стилей style.css добавим несколько правил:

#prev {
	width:38px;
	height:38px;
	display: block;
	float:left;
	background-image: url(../images/prev.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-right:20px;
}
#next {
	width:38px;
	height:38px;
	display: block;
	margin-left:230px;
	background-image: url(../images/next.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.load {
	background:url(../images/loading17.gif) center no-repeat;width:66px;height:66px;position:absolute;display:block;left:50%;top:50%;z-index:10;
}

Вы, можете увидеть, что я использую правила для задания фона блоков. И фоном служат изображения – данные изображения я заготовил перед написанием урока. Вы их найдете в исходниках к уроку, в папке images. Теперь давайте, посмотрим, что у нас получилось:

Как Вы видите, кнопочки отображаются нормально, теперь давайте отобразим горизонтальную прокрутку, для этого в файл index.php добавим следующий код (сразу после вывода открывающего тега body):

<script>
		$(document).ready(function () {
			
			$(".load").hide();
			
			$("#slider").slider({
				step:1,
				min:1,
				max:<?=$number_pages;?>
			});
		});
	</script>

Итак, первым делом скрываем блок с классом load, так как пока, он нам не нужен. Для этого используем метод hide(), который применяется для скрытия объектов. Далее выбираем при помощи jQuery , блок с идентификатором slider и вызываем метод slider({}), данный метод принадлежит библиотеке jQuery UI. При этом определяем несколько свойств:

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

min – минимальное значение слайдера, в нашем случае равно 1, так как страница с номером 1 – это первая страница.

max – максимальное значение слайдера, то есть здесь, необходимо указать номер последней страницы. В нашем случае в переменной $number_pages, содержится количество страниц необходимых для отображения всех статей в базе данных. То есть значение данной переменной и есть номер последней страницы. Вот мы его и выводим, используя альтернативный синтаксис PHP — . Вот таким образом можно, передавать значение переменной языка PHP в javascript.

Теперь давайте посмотрим, что получилось:

Итак, как Вы видите, появилась горизонтальная полоса прокрутки, теперь давайте добавим несколько стилевых правил и более красиво оформим ползунок полосы прокрутки. Для этого добавим в файл style.css следующий код:

a.ui-slider-handle {
	text-decoration: none;
	background-color: #FFFFFF !important;
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.08) 80%) !important;
    border-radius: 50% 50% 50% 50%;
	height: 40px !important;
    width: 40px !important;
	position: relative;
	top:-15px !important;
    cursor: pointer;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

Как вы видите, что бы изменить оформление ползунка слайдера, необходимо обратиться к классу ui-slider-handle. Так как, ползунок – это не что иное, как обычная ссылка с данным классом.

Теперь, так как мы изменили размеры ползунка, необходимо подкорректировать, его крайнее правое положение, так как в этом положении он очень сильно перемещается в правую сторону и тем самым закрывает кнопку, перехода на следующую страницу. Что бы это исправить необходимо перейти в файл jquery-ui-1.10.1.custom.css, и на строке 118 (.ui-slider-horizontal .ui-slider-handle), заменить значение левого внешнего отступа с -0,6 em на -1.15em, в конечном итоге у Вас должно получиться вот так:

.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -1.15em;
}

3. Дорабатываем слайдер

Теперь, кода мы закончили с оформлением слайдера, необходимо реализовать, собственно, механизм перемещения по страницам, при перетаскивании ползунка слайдера. Для этого воспользуемся событием stop, слайдера и методом AJAX. В файле index.php заменим код вызова метода slider, на следующий:

$("#slider").slider({
				step:1,
				min:1,
				max:<?=$number_pages;?>,
				stop: function(event, ui) {
					$(".load").fadeIn(300,function() {
						$.ajax({
							url:'index.php',
							type:'GET',
							data: "page="+ui.value+"&move=1",
							success: function(html) {
								$(".load").fadeOut(300,function() {
								///
								$(".main_text").html(html).hide().fadeIn(300);
								$(".ui-slider-handle span").text(ui.value);
								});
							}
						
						});
					
					});
				}
				
			});
			$("#slider").slider("option","value",<?=$page;?>);
			$(".ui-slider-handle").html("<span>"+$("#slider").slider("value")+"</span>");

Итак, давайте по-порядку:

stop – данное событие срабатывает когда перемещение ползунка слайдера полностью остановилось. То есть, когда пользователь перемещает ползунок, на любое расстояние, а потом останавливает, сразу же срабатывает данное событие и выполняется функция, которая в нем описана.

Далее используя метод fadeIn(), показываем блок с классом .load (который информирует пользователя о начале обращения к серверу). Данный блок показывается с анимацией, и длительность анимационного эффекта, составляет 300 миллисекунд (первый параметр данной функции). После завершения анимационных эффектов, выполняется функция, которая передана данному методу вторым параметром.

Затем обращаемся к методу ajax({}), при помощи библиотеки jQuery и передаем следующие параметры:

url – файл к которому обращаемся асинхронно (при помощи метода ajax), в нашем случае index.php.

type – тип передачи данных, в нашем случае данные будем передавать при помощи метода GET.

data – данные которые отправляются на сервер. Для навигации по страницам, нам необходимо отправить номер страницы, на которую необходимо перейти. Поэтому, мы отправляем переменную page, со значением ui.value. А в свойстве value объекта ui – содержится текущее значение слайдера (полосы прокрутки), то есть номер страницы, на которую необходимо перейти. А также передаем переменную move со значением 1, то есть вспомогательный параметр, наличие которого, означает, что необходимо выполнить перемещение на следующую страницу.

success – данное событие срабатывает при успешном обращении к серверу. То есть когда запрос к серверу выполнился успешно, вызывается функция, описанная в этом событие. Данная функция принимает всего один параметр – переменная html – это ответ от сервера. В нашем случае – это данные, которые необходимо вывести на экран. Код данной функции очень простой. Вначале скрываем блок с классом load, при помощи метода fadeOut, с анимацией длительностью 300 миллисекунд. По завершению анимационных эффектов, вызывается функция, которая описана во втором параметре данного метода. Здесь обращаемся к блоку с классом main_text и, используя метод html (который позволяет вставить любой html код в выбранный блок), заменяем весь html код данного блока, значением переменной html. То есть, вставляем те данные, которые вернулись нам после запроса к серверу, используя метод ajax (об этих данных мы поговорим позже). Но данные мы сразу не показываем, так как мгновенно скрываем их, используя метод hide(), и тут же плавно показываем при помощи метода fadeIn(), с анимацией длительностью 300 миллисекунд. И в конце обращаемся к блоку , который находится внутри контейнера с классом ui-slider-handle (это ползунок слайдера) и при помощи метода text, вставляем текущее значение слайдера внутрь ползунка (то есть данный метод позволяет вставить любой текст внутрь выбранного блока). Блок мы с Вами чуть позже создадим, он нужен для вывода внутри ползунка номера, текущей страницы, отображаемой на экране.

Как Вы помните пока навигация по страницам осуществляется передачей переменной $page через адресную строку, поэтому для того что бы позиция ползунка слайдера всегда соответствовала значению переменной $page, необходимо задать это значение для ползунка слайдера. Для этого вызываем повторно метод slider(), для блока с идентификатором slider, обращаемся к его опциям (первый параметр option), указываем, что необходимо обратиться к его значению (второй параметр value), и третьим параметром передаем текущее значение переменной $page. Обратите внимание, что переменная $page – это переменная языка PHP.

И в конце, создаем внутри ползунка (тег a с классом ui-slider-handle) блок span, в котором выведем текущее значение ползунка слайдера.

Теперь еще необходимо добавить в файл index.php, следующий код (сразу после вызова функции get_posts()):

if($_GET['move'] == 1) {
	////
	foreach($result as $row) {
				
					printf("<table class='table' width='780' border='0' cellspacing='0' cellpadding='0'>
				     		 <tr>
				     		 <td class='td_top'>
				      		<h5><a href='text.php?id=%s'>%s</a></h5>
							<p>Автор: <a href='%s'>%s</a><br>
				     		 Дата добавления: %s
							 </td>
				            </tr>
				            <tr>
				            <td>
								<img align='left' src='%s'><p>%s</p></td>
				            </tr>
				            <tr>
				            <td>
							<p>Просмотров: %s </p>
							</td>
				            </tr>
				            </table>
							",$row['id'], $row['title'], $row['author'], $row['author'], $row['date'], $row['img_src'], $row['discription'], $row['view']);
				}
		exit();		
}

Смотрите, когда мы обратимся к файлу index.php через метод ajax, то вначале отработает функция get_posts(), которой будет передан номер той страницы, на которую необходимо перейти. А затем выполнится код, который мы с Вами только что добавили, так как была передана переменная $move со значением 1. То есть в цикле выведутся статьи и сразу же произойдет выход по функции exit(). Но так как мы с Вами обращаемся асинхронно, используя ajax, то данные из цикла сразу не будут выведены на экран – они будут храниться в памяти, и попадут в переменную html, как ответ от сервера. Функция exit() – нужна, для того, что бы в ответ от сервера, ничего кроме статей больше не попало.

Теперь давайте еще добавим css правил к блоку span, то есть красиво оформим номер страницы внутри ползунка слайдера:

a.ui-slider-handle span {
	 line-height: 40px;
	  text-align: center;
	  height:100%;
	  width:100%;
	  position: absolute;
}

Теперь, давайте перейдем в браузер и посмотрим, что у нас получилось:

Как Вы видите, все нормально выводится, и к тому же можно перемещаться по страницам используя, ползунок слайдера.

4. Дорабатываем кнопки

Теперь необходимо реализовать возможность перехода по страницам, нажимая на кнопки, вперед и назад. Для этого в файл index.php, добавим следующий код:

$("#next").click(function() {
				var val_slide = $("#slider").slider("value")
				if(val_slide < (<?=$number_pages;?>)) {
					val_slide += 1;
					$("#slider").slider("option","value",val_slide);
					$(".load").fadeIn(300,function() {
						$.ajax({
							url:'index.php',
							type:'GET',
							data: "page="+val_slide+"&move=1",
							success: function(html) {
								$(".load").fadeOut(300,function() {
								///
									$(".main_text").html(html).hide().fadeIn(300);
									$(".ui-slider-handle span").text(val_slide);
								});
							}
						
						});
					
					});
				}
			
			});
			
			$("#prev").click(function() {
				var val_slide = $("#slider").slider("value")
				if(val_slide > 1) {
					val_slide -= 1;
					$("#slider").slider("option","value",val_slide);
					$(".load").fadeIn(300,function() {
						$.ajax({
							url:'index.php',
							type:'GET',
							data: "page="+val_slide+"&move=1",
							success: function(html) {
								$(".load").fadeOut(300,function() {
								///
									$(".main_text").html(html).hide().fadeIn(300);
									$(".ui-slider-handle span").text(val_slide);
								});
							}
						
						});
					
					});
				}
			
			});

Итак, давайте поясню код, для одной кнопки, к примеру с идентификатором next. Первым делом, при помощи jQuery выбираем, данную кнопку и вызываем метод click(), то есть обработчик события click – нажатие кнопкой мыши по выбранному элементу. Когда произойдет нажатие по выбранному элементу, выполниться функция, описанная в данном методе. Далее создаем переменную val_slide и записываем в нее текущее значение ползунка слайдера. Далее, что бы не выйти за максимальный предел слайдера (а максимальный предел – это последняя страница слайдера), создаем условие – если значение переменной val_slide, меньше чем значение, хранящееся в переменной $number_pages (последняя страница слайдера). То увеличиваем переменную val_slide на единицу (так как переходим на одну страницу вперед) и записываем, это значение в значение ползунка слайдера. А далее все действия аналогичны: показываем бок с классом load и при помощи метода ajax обращаемся к файлу index.php и передаем номер страницы, на которую необходимо прейти, далее при успешном ответе от сервера – выводим новые данные на экране.

Для кнопки перехода к предыдущим страницам (с идентификатором prev) – действия аналогичны, за исключением двух моментов. Первый момент – так как при нажатии на данную кнопку необходимо показывать предыдущую страницу, значит необходимо проверять, не вышли ли мы за минимальный предел слайдера (минимальный предел – это страница с номером 1). И второй момент – это то, что переменную val_slide (текущее значение слайдера) необходимо при каждом нажатии, уменьшать на единицу (так как необходимо отображать предыдущую страницу).

Теперь можно перейти в браузер и посмотреть, что у нас получилось:

Теперь можно переходить по страницам, нажимая на кнопки вперед и назад.

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (9)

  1. Лина

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

    • Виктор Гавриленко

      Здравствуйте!
      Ну, смотрите у Вас уже есть работающий код для переключения страниц. Для начала просто отобразите слайдер, путем добавления разметки html необходимой для его работы и конечно же добавьте в соответствии с уроком код javascript. Когда слайдер у Вас заработает — без переключения страниц. Начинайте интеграцию его с Вашим скриптом. Попросту говоря, нужно добавbть Ваш код в функцию которая описана в настройке stop метода slider(). Ну и затем изменить код для левой и правой кнопки навигации по страницам.

      • Лина

        Я надеялась на более подробный ответ, поскольку плохо разбираюсь в jquery (я обычный пользователь, использую готовые скрипты и в программировании ничего не понимаю :) ). Но все равно благодарна за Ваше внимание. Спасибо за попытку.

      • костя

        здравствуйте
        интересный урок но вот в исходниках нет файла text.php как быть? очень хотелось что бы вы его выложили для примера не могу разобраться, а так все работает) жду ответа всего хорошего.

  2. Анатолий

    Спасибо за урок!

    Но есть пару вопросов:
    1 — Как корректно выводить заметки из базы ПО КАТЕГОРИЯМ?

    Я добавил к созданной нами php функции (которая вычисляет с какого поста начинать вывод и формирует массив ($row) в ответ) дополнительный параметр — $cat, и внутри функции в запросе к базе дополнительно — WHERE cat=’$cat’.

    Все хорошо выводиться но только на первых двух страницах 1,2….начиная с 3 и далее страницы не выводятся, но на слайдере отображается номер страницы (3,4,5…) — передвигаю слайдер на 1 или 2 страницу они, как сказал выше — выводятся нормально.

    Если в адресной строке браузера передать вручную переменную ‘page’ с номером от 3 и выше, то заметки выводятся из базы нормально и на слайдере отображается соответствующий номер страницы.

    P.S: Если из функции в php с запросом к базе убрать параметр WHERE cat=’$cat’ — то слайдер нормально выводит каждую страницу, но в списке уже конечно все посты, а не по заданной категории.

    2 — Как к слайдеру добавить отображение номера страницы не после ее загрузки, а непосредственно при его передвижении?

    Заранее выражаю ОГРОМНУЮ БЛАГОДАРНОСТЬ Виктор!

    • Андрей Кудлай

      Анатолий, наверное, будет лучше, если вы создадите тему на нашем форуме, где и код можно нормально выложить, и Виктор быстрее заметит вопрос и сможет что-то ответить.

  3. Вадим

    Не знаю насколько актуален вопрос, возможно уже есть обновленный пост с этой навигацией.

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

    Возможно ли это как-то исправить, может есть актуальные примеры? Увы, процент людей с IE все таки еще внушительный.

  4. Алексей

    Здравствуйте. Мне нужно подгружать на страницу файлы, которые содержат javascript код.
    if($_GET['move'] == 1){
    echo file_get_contents(«files/filedata/570561d33e538.html»);
    exit();
    }
    И у меня почему то не работает. вот с обычным html контентом в хорошо работает, а если подгружать файл, который содержит javascript — не работает.
    Подскажите в чем причина?

    • Виктор Гавриленко

      Здравствуйте!
      Возможно загружая файл с JavaScript у Вас возникают ошибки в данном языке. Нужно отлаживать код.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree