Посторінкова навігація з використанням AJAX та jQuery. Частина 2

20

Від автора: у минулому уроці ми з Вами почали створювати посторінкову навігацію для сайту. Але ми її не закінчили, виконали лише розбиття загальної кількості статей на окремі сторінки й умовилися, що доступ до кожній сторінці можливий лише передаючи через адресний рядок змінну page і потім номер сторінки. Погодьтеся — це дуже незручно. Тому в даному уроці ми з Вами створимо навігаційну панель, за допомогою якої можна здійснити швидке і зручне переміщення по сторінках посторінкової навігації.

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

Посторінкова навігація з використанням AJAX та jQuery. Частина 2Посторінкова навігація з використанням AJAX та jQuery. Частина 2

1. Завантаження необхідних бібліотек

Другий основний елемент навігаційної панелі – це горизонтальна смуга прокрутки, і для її створення, ми скористаємося стандартними віджетом бібліотеки jQuery UI, під назвою SLIDER.

Отже, насамперед необхідно завантажити дану бібліотеку, для цього переходимо на офіційний сайт бібліотеки – jqueryui.com. Далі переходимо на вкладку Download, для скачування бібліотеки. Як Ви знаєте, завантажити дану бібліотеку можна в двох варіантах: в повному обсязі, тобто з повним набором віджетів, ефекти і т. д., і в обмеженому обсязі, тобто галочками відзначити тільки ті елементи, які потрібно завантажити. Ми так і вчинимо, тому відмічаємо галочками всі елементи, що відносяться до ядра бібліотеки, потім віджет slider і залишаємо зазначеними всі візуальні ефекти.

Посторінкова навігація з використанням AJAX та jQuery. Частина 2

Далі, необхідно вибрати колірну схему бібліотеки — або стандартну з випадаючого списку, або згенерувати самостійно, перейшовши за 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 додамо кілька правил:

#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. Тепер давайте подивимося, що у нас вийшло:

Посторінкова навігація з використанням AJAX та jQuery. Частина 2

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

$(document).ready(function () {
$(«.load»).hide();
$(«#slider»).slider({
step:1,
min:1,
max:
});
});

Отже, першим ділом приховуємо блок з класом load, так як поки він нам не потрібен. Для цього використовуємо метод hide(), який застосовується для приховування об’єктів. Далі вибираємо за допомогою jQuery , блок з ідентифікатором slider і викликаємо метод slider({}), даний метод належить бібліотеці jQuery UI. При цьому визначаємо кілька властивостей:

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

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

max – максимальне значення слайдера, тобто тут необхідно вказати номер останньої сторінки. У нашому випадку В змінній $number_pages, міститься кількість сторінок необхідних для відображення всіх статей бази даних. Тобто значення даної змінної і є номер останньої сторінки. Ось ми його і виводимо, використовуючи альтернативний синтаксис PHP . Ось таким чином можна передавати значення змінної мови PHP в javascript.

Тепер давайте подивимося, що вийшло:

Посторінкова навігація з використанням AJAX та jQuery. Частина 2

Отже, як Ви бачите, з’явилася горизонтальна смуга прокрутки, тепер давайте додамо кілька стильових правил і більш красиво оформимо повзунок смуги прокручування. Для цього додамо в файл 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. Так як, повзунок – це не що інше, як звичайна посилання з даним класом.

Посторінкова навігація з використанням AJAX та jQuery. Частина 2

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

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

3. Допрацьовуємо слайдер

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

$(«#slider»).slider({
step:1,
min:1,
max:,
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»,);
$(«.ui-slider-handle»).html(««+$(«#slider»).slider(«value»)+»«);

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

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(«

%s

Переглядів: %s

«,$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;
}

Тепер, давайте перейдемо в браузер і подивимося, що у нас вийшло:

Посторінкова навігація з використанням AJAX та jQuery. Частина 2

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

4. Допрацьовуємо кнопки

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

$(«#next»).click(function() {
var val_slide = $(«#slider»).slider(«value»)
if(val_slide < ()) {
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 (поточне значення слайдера) необхідно при кожному натисканні, зменшувати на одиницю (так як необхідно відображати попередню сторінку).

Тепер можна перейти браузер і подивитися, що у нас вийшло:

Посторінкова навігація з використанням AJAX та jQuery. Частина 2

Тепер можна переходити по сторінках, натискаючи на кнопки вперед і назад.

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

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