Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Загрузка та анімація контенту за допомогою jQuery.

by
Read Time:6 minsLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

У цьому посібнику ми розглянемо звичайний веб-сайт и покращимо його за допомогою jQuery. Ми додамо функціональність AJAX для того, щоб контент завантажувався до відповідного контейнера без необхідності переходу користувача на іншу сторінку. Також ми додамо декілька цікавих анімаційних ефектів.




Отже, насамперед, я створив дуже простий макет для даного прикладу. Нижче наводиться скриншот та код, які будемо використовувати.


Крок 1

Щонайперше, перейдіть за посиланням та завантажте останню стабільну версію jQuery та додайте її до свого документа.

Як на мене, одна з головних переваг бібліотеки jQuery - простота її використання. Для реалізації описаної вище функціональності та класних ефектів нам необхідно написати лише декілька рядків коду.

Щонайперше, давайте завантажимо бібліотеку jQuery та викличемо функцію, одразу після того, як документ готов до маніпуляцій(коли DOM (* Об'єктна модель документа. Тут і надалі примітка перекладача) завантажена).


Крок 2

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

Ми хочемо вибрати посилання усередині навігаційного меню та викликати функцію при клацанні їх.

Давайте підведемо підсумки дій функції за порядком подій:

  1. Видалення контенту поточної сторінки.
  2. Розташовування контенту нової сторінки у блоці DIV з вмістом.

Нам необхідно зазначати сторінку, з котрої будемо звавнтажувати дані при клацанні посилання. Для цього нам необхідно лише вибрати атрибут 'href' посилання, котре клацнули. Отриманий вираз відповідає сторінці, з котрої будемо запитувати дані. Також нам необхідно зазначити, звідкіля будемо брати дані зі запитуваної сторінки. Тобто, ми б не хотіли брати всі дані, а тільки дані з блоку div з контентом. Таким чином, отримуємо:

Щоб проілюструвати роботу вищезазначеного коду, давайте уявимо, що користувач клацає лінк 'about', котрий посилається на сторінку 'about.html'. У даному випадку значенням змінної було би: 'about.html #content'. Саме його ми і  будемо використовувати у запиті AJAX. Проте насамперед нам необхідно зробити витончений ефект для контенту поточної сторінки. Замість простого видалення контенту ми збираємося використовувати функцію 'hide' jQuery наступним чином:

Вищезазначений код швидко "приховувує" #content div. По завершенні ефекту відбувається виклик функції 'loadContent', котра завантажує новий контент за допомогою запиту AJAX. Цю функцію ми визначимо пізніше (Крок 4).


Крок 3

Щойно старий контент ефектно зникає, нам не хотілося б залишити користувача просто гадати, чи все добре з програмою, до надходження нового контенту (особливо, якщо у нього повільне інтернет-з'єднання). Тому ми створимо невеликий малюнок "завантаження", завдяки якому вони будуть знати, що дещо відбувається на задньому плані.

Нижче наводиться код CSS (* Cascading Style Sheets, Таблиці каскадних стилів) для щойно створеного span #load:

Як показано вище, за умовчанням для даного "індикатора завантаження" span задана властивість display:none. Проте при виклику функції fadeIn (вище у коді) елемент з'явиться у правому верхньому куті сайту разом із анімаційним зображенням в форматі GIF (* Graphics Interchange Format, формат обміну графічними даними).


Крок 4

Поки що при клацанні користувачем якого-небудь посилання відбудеться наступне:

  1. Ефектно зникне поточний контент.
  2. З'явиться повідомлення про завантаження.

Давайте тепер визначимо функцію loadContent, котру викликали раніше:

Функція loadContent запитує необхідну користувачу сторінку та по завершенні запиту викликає функцію 'showNewContent':

Ця функція showNewContent використовує функцію jQuery show (нуднувата назва для здійснюваного нею класного ефекту) для показу нового (запитаного) контенту в елементі div '#content'. Після показу контенту дана функція викликає функцію  'hideLoader':

Слід пам'ятати, що в кінці функції нам необхідно "повернути false" для того, щоб браузер не переходив на сторінку.

Тепер функція повинна працювати як загадувалося. Ви можете подивитися приклад за посиланням.

Нижче наводиться код, який маємо наразі:


Крок 5

На цьому можна було б зупинитися. Проте, якщо ви турбуєтеся про usability (зручність та простота використання) вашого сайту (і варто би), то потрібно додати ще дещо. Недолік нашого підходу - зневажання URL-адресою (* Uniform Resource Locator — єдиний вказівник на ресурс). Якщо б користувач захотів послатися на одну зі "сторінок", він би не зміг, оскільки URL-адреса незмінна.

Щоб це виправити, можна було б використати значення hash-компонента (* частина URL, розташована після символа решітки '#', включаючи символ '#') URL-адреси для зазначення сторінки, яку переглядає користувач. Отже, якщо користувач переглядає контент 'about', то URL-адреса могла б бути наступною: 'www.website.com/#about'. Для додавання hash до URL-адреси кожного разу, коли користувач клацає посилання навігаційного меню, нам необхідно додати тільки один рядок коду до функції 'click'.

Вищезазначений код змінює значення hash URL-адреси на значення властивості 'href' клацнутого посилання (виключаючи розширення '.html'). Таким чином, якщо користувач клацає посилання 'home' (href=index.html), то значенням hash буде '#index'.

Також нам би хотілося, щоб користувач мав можливість набрати URL-адресу та бути переадресованим на потрібну сторінку. Для цього ми перевіряємо значення hash при завантаженні сторінки та змінюємо контент сторінки відповідним чином:

Нижче наведено весь необхідний код javascript, враховуючи вищезазначений (додайте бібліотеку jQuery):


Завершено...

Одна з переваг даного підходу полягає в тому, що його можна адаптувати та застосувати до веб-сайту за декілька хвилин. Він повністю відповідає вимогам ненав'язливого JavaScript. Веб-сайт буде нормально працювати (* буде відображатися контент, проте перестануть працювати круті эфекти jQuery) і при вимкнутому JavaScript куристувача.

Подивитися підсумковий працюючий приклад

Завантажити HTML, JS, CSS та зображення

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.