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

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

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

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

План урока

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

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

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

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

автор

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

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

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

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

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

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

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

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

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