Динамічне завантаження контенту через jQuery

16

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

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

Також завантажте вихідні коди собі на комп’ютер!

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

Динамічне завантаження контенту через jQuery

mmm… Ajax!
@import url(css.css);

ajax … nettuts

Welcome!

Text

Крок 1

Спочатку підіть і скачайте останній стабільний реліз jQuery і додайте посилання на нього у ваш документ:

Як я вважаю, одна з кращих рис jQuery – це його простота. Можна досягти поставленого завдання в поєднанні з приголомшливими ефектами лише кількома рядками коду.

По-перше, давайте завантажимо бібліотеку jQuery і запустимо функцію, коли документ уже готовий (коли DOM вже завантажений).

$(document).ready(function() {
// Stuff here
});

Крок 2

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

Для цього нам потрібно визначити посилання в меню навігації і запускати цю функцію при натисканні на них:

$(‘#nav li a’).click(function(){
// function here
});

Давайте визначимо, що ми повинні зробити в цій функції по порядку.

Вилучити вміст поточної сторінки.

Отримати нове вміст сторінки і додати вміст DIV.

Спочатку нам потрібно визначити, з якої сторінки отримувати дані після того, як на посилання натиснули. Все, що для цього потрібно зробити – це отримати атрибут ‘href’ натиснутою посилання і використовувати його як адреса сторінки, з якої буде завантажуватися інформація.
Крім того, до отриманого URL необхідно додати мітку елемента, так як ми не збираємося використовувати ВЕСЬ вміст з запитуваної сторінки. Замість цього, нам потрібні дані всередині роздільника div з міткою ‘content’:

var toLoad = $(this).attr(‘href’)+’ #content’;

Щоб наочно продемонструвати, що робить вищевказаний код, давайте уявимо, що користувач натискає на посилання ‘about’ , яка пов’язана зі сторінкою ‘about.html’ – в цій ситуації змінної буде: ‘about.html #content’ – і це саме та змінна, яку ми будемо запитувати при простому виклик. Однак перше, з чого ми почнемо, – це створимо гарний ефект для вмісту сторінки. Замість того, щоб воно просто зникало, ми використовуємо функцію «приховування» jQuery:

$(‘#content’).hide(‘fast’,loadContent);

Зазначена функція швидко «ховає» #content div, і як тільки ефект закінчує свою дію, вона, в свою чергу, ініціює функцію «loadContent» (завантаження нового вмісту [через ajax]) – це функція, яку ми визначимо пізніше (в кроці 4).

Крок 3

Як тільки старе вміст зникне з приголомшливим ефектом, нам не можна просто залишити користувачів в очікуванні, поки не з’явиться новий вміст (особливо якщо у них повільне з’єднання з Інтернетом), так що ми створимо трошки графіки «завантаження» щоб користувачі знали, що щось відбувається в фоновому режимі:

Динамічне завантаження контенту через jQuery

$(‘#wrapper’).append(‘LOADING…‘);
$(‘#load’).fadeIn(‘normal’);

Ось CSS, додається до свежесозданному #load div:

#load {
display: none;
position: absolute;
right: 10px;
top: 10px;
background: url(images/ajax-loader.gif);
width: 43px;
height: 11px;
text-indent: -9999em;
}

Таким чином область, яка повинна містити анімацію завантаження, спочатку не відображається. Далі, при ініціалізації функції fadeIn () (див. вище коді), вона починає відображатися у верхньому правому куті сайту і показує анімований GIF, поки через деякий час знову не зникне з екрана.

Крок 4

Через деякий час, коли користувач натискає на одну з посилань, що почне відбуватися наступне:

Поточне утримання ефектно зникає.

З’являється повідомлення про завантаження.

А тепер давайте напишемо ту саму функцію завантаження вмісту, про яку ми раніше говорили:

function loadContent() {
$(‘#content’).load(toLoad,»,showNewContent)
}

Функція loadContent викликає запитану сторінку, а коли це вже виконано, викликає функцію ‘showNewContent’ (показ нового вмісту):

function showNewContent() {
$(‘#content’).show(‘normal’,hideLoader);
}

Ця функція – showNewContent — використовує функцію show() jQuery (насправді, це дуже нудне назва для такого відмінного ефекту) з тим, щоб новий вміст, позначений міткою елемента ‘#content’ з’явилося на сторінці. Одного разу викликана, вона ініціює функцію ‘hideLoader’ (згасання):

function hideLoader() {
$(‘#load’).fadeOut(‘normal’);
}

Нам необхідно пам’ятати, що функція обробки кліка повинна повернути «false», щоб браузер не здійснив переходу на іншу сторінку.

Тепер все має працювати чудово. Приклад цього можна побачити тут: [LINK]

А ось код:

$(document).ready(function() {
$(‘#nav li a’).click(function(){
var toLoad = $(this).attr(‘href’)+’ #content’;
$(‘#content’).hide(‘fast’,loadContent);
$(‘#load’).remove();
$(‘#wrapper’).append(‘LOADING…‘);
$(‘#load’).fadeIn(‘normal’);
function loadContent() {
$(‘#content’).load(toLoad,»,showNewContent())
}
function showNewContent() {
$(‘#content’).show(‘normal’,hideLoader());
}
function hideLoader() {
$(‘#load’).fadeOut(‘normal’);
}
return false;
});
});

Крок 5

Можна було б на цьому і зупинитися, але якщо ви турбуєтеся про зручність використання (про яке повинні піклуватися), важливо зробити ще дещо-яку роботу. Проблема нашого поточного рішення в тому, що воно ігнорує адреси URL. Що, якщо користувач захоче визначити посилання на одну з наших так званих «сторінок»? Зараз це зробити неможливо, тому що URL весь час один і той же.

Найкраще, що можна зробити – це змінити значення мітки вмісту в URL, щоб визначити, що саме зараз переглядає користувач. Таким чином, якщо користувач переглядає вміст посилання ‘about’, URL повинен бути таким: ‘www.website.com/#about’. Для цього нам потрібно всього лише додати один рядок коду у функцію ‘click’, яка буде хэшировать поточну сторінку в URL при клацанні користувача на посилання навігації:

window.location.hash = $(this).attr(‘href’).substr(0,$(this).attr(‘href’).length-5);

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

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

var hash = window.location.hash.substr(1);
var href = $(‘#nav li a’).each(function(){
var href = $(this).attr(‘href’);
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+’.html #content’;
$(‘#content’).load(toLoad)
}
});

Отже, ось весь необхідний код на javascript (і бібліотека jQuery):

$(document).ready(function() {
// Check for hash value in URL
var hash = window.location.hash.substr(1);
var href = $(‘#nav li a’).each(function(){
var href = $(this).attr(‘href’);
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+’.html #content’;
$(‘#content’).load(toLoad)
}
});
$(‘#nav li a’).click(function(){
var toLoad = $(this).attr(‘href’)+’ #content’;
$(‘#content’).hide(‘fast’,loadContent);
$(‘#load’).remove();
$(‘#wrapper’).append(‘LOADING…‘);
$(‘#load’).fadeIn(‘normal’);
window.location.hash = $(this).attr(‘href’).substr(0,$(this).attr(‘href’).length-5);
function loadContent() {
$(‘#content’).load(toLoad,»,showNewContent())
}
function showNewContent() {
$(‘#content’).show(‘normal’,hideLoader());
}
function hideLoader() {
$(‘#load’).fadeOut(‘normal’);
}
return false;
});
});

Кінець…

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

На цьому, випуск присвячений створенню динамічного завантаження контенту, без перезавантаження сторінки, засобами AJAX та jQuery, завершено.

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

Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.

E-mail: [email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

P. S. Хочете опублікувати цікавий тематичний матеріал? Якщо відповідь «Так», то тисніть сюди.