Постраничная навигация с использованием 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 и подключаем библиотеки:

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

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

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

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

Смотрите, блок с классом 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 добавим несколько правил:

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

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

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

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

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

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

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

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

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

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

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

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

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

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()):

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

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

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

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

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

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

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

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

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

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

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

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

Метки: ,

Похожие статьи:

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

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