В этом учебнике мы возьмем средний обычный веб-сайт и улучшим его с помощью jQuery. Мы добавим AJAX-функциональности, которая позволит содержимому динамически загружать контент, без перезагрузки страницы, в соответствующий контейнер. Вместо того, чтобы заставлять пользователя переходить на другую страницу. А также интегрируем кое-какие потрясающие анимационные эффекты.
Макет страницы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>mmm... Ajax!</title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> @import url(css.css); </style> <script type="text/javascript" src="js.js"></script> </head> <body> <div id="wrapper"> <h1>ajax ... nettuts</h1> <ul id="nav"> <li>welcome</li> <li>about</li> <li>portfolio</li> <li>contact</li> <li>terms</li> </ul> <div id="content"> <h2>Welcome!</h2> <p>Text</p> </div> <div id="foot">Tutorial by James for NETTUTS</div> </div> </body> </html>
Шаг 1
Вначале пойдите и скачайте последний стабильный релиз jQuery и добавьте ссылку на него в ваш документ:
<script type="text/javascript" src="jQuery.js"></script>
Как я считаю, одна из лучших черт jQuery – это его простота. Можно достичь поставленной задачи в сочетании с ошеломляющими эффектами всего несколькими строчками кода.
Во-первых, давайте загрузим библиотеку jQuery и запустим функцию, когда документ уже готов (когда DOM уже загружен).
$(document).ready(function() {
// Stuff here
});
Шаг 2
Нам нужно сделать так, чтобы при нажатии на ссылку в меню навигации на нашей странице, браузер не делал переход на соответствующую страницу, а динамически загружал контент этой страницы внутрь нашего макета, без перезагрузки.
Для этого нам нужно определить ссылки в меню навигации и запускать эту функцию при щелчке на них:
$('#nav li a').click(function(){
// function here
});
Давайте наметим, что мы должны сделать в этой функции по порядку.
Удалить содержимое текущей страницы.
Получить новое содержимое страницы и добавить в содержимое DIV.
Вначале нам нужно определить, из какой страницы получать данные после того, как на ссылку нажали. Все, что для этого нужно сделать – это получить атрибут ‘href’ нажатой ссылки и использовать его как адрес страницы, из которой будет загружаться информация.
Кроме того, к полученному URL необходимо добавить метку элемента, так как мы не собираемся использовать ВСЕ содержимое из запрашиваемой страницы. Вместо этого, нам требуются данные внутри разделителя div с меткой ‘content’:
$('#content').hide('fast',loadContent);
Указанная функция быстро «прячет» #content div, и как только эффект заканчивает свое действие, она, в свою очередь, инициирует функцию «loadContent» (загрузка нового содержимого [через ajax]) – это функция, которую мы определим позже (в шаге 4).
Шаг 3
Как только старое содержимое исчезнет с ошеломляющим эффектом, нам нельзя просто оставить пользователей в ожидании, пока не появится новое содержимое (особенно если у них медленное соединение с Интернетом), так что мы создадим немножко графики «загрузки» чтобы пользователи знали, что что-то происходит в фоновом режиме:
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#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('<span id="load">LOADING...</span>');
$('#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('<span id="load">LOADING...</span>');
$('#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, завершен.