От автора: в прошлом уроке мы с Вами начали создавать постраничную навигацию для сайта. Но мы ее не закончили, выполнили только лишь разбиение общего количества статей на отдельные страницы и условились, что доступ к каждой странице возможен только лишь передавая через адресную строку переменную 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 и подключаем библиотеки:
1 2 |
<script src="js/jquery-1.9.1.js"></script> <script src="js/jquery-ui-1.10.1.custom.js"></script> |
Далее подключаем стили:
1 |
<link rel="stylesheet" href="css/jquery-ui-1.10.1.custom.css"> |
Теперь можно приступать к созданию навигационной панели.
2. Создание слайдера
Итак, первым делом, давайте в файле index.php, создадим несколько блоков, в которых будет располагаться навигационная панель. Сразу после открытия блока content добавляем следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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 добавим несколько правил:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
#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):
1 2 3 4 5 6 7 8 9 10 11 12 |
<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 — =$number_pages;?>. Вот таким образом можно, передавать значение переменной языка PHP в javascript.
Теперь давайте посмотрим, что получилось:
Итак, как Вы видите, появилась горизонтальная полоса прокрутки, теперь давайте добавим несколько стилевых правил и более красиво оформим ползунок полосы прокрутки. Для этого добавим в файл style.css следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 |
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, в конечном итоге у Вас должно получиться вот так:
1 2 3 4 |
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -1.15em; } |
3. Дорабатываем слайдер
Теперь, кода мы закончили с оформлением слайдера, необходимо реализовать, собственно, механизм перемещения по страницам, при перетаскивании ползунка слайдера. Для этого воспользуемся событием stop, слайдера и методом AJAX. В файле index.php заменим код вызова метода slider, на следующий:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
$("#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()):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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, то есть красиво оформим номер страницы внутри ползунка слайдера:
1 2 3 4 5 6 7 |
a.ui-slider-handle span { line-height: 40px; text-align: center; height:100%; width:100%; position: absolute; } |
Теперь, давайте перейдем в браузер и посмотрим, что у нас получилось:
Как Вы видите, все нормально выводится, и к тому же можно перемещаться по страницам используя, ползунок слайдера.
4. Дорабатываем кнопки
Теперь необходимо реализовать возможность перехода по страницам, нажимая на кнопки, вперед и назад. Для этого в файл index.php, добавим следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
$("#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 (текущее значение слайдера) необходимо при каждом нажатии, уменьшать на единицу (так как необходимо отображать предыдущую страницу).
Теперь можно перейти в браузер и посмотреть, что у нас получилось:
Теперь можно переходить по страницам, нажимая на кнопки вперед и назад.
Вот мы с Вами и закончили постраничную навигацию на сайте. Надеюсь, Вам понравился данный вариант ее реализации, конечно, он немного не стандартный, но, на мой взгляд, довольно интересный и будет красиво смотреться на сайте.
А на этом данный урок завершен, всего Вам доброго, удачного кодирования и увидимся в следующих уроках.
Комментарии (9)