Меню

WordPress Динамическая загрузка контента через jQuery

В этом учебнике мы возьмем средний обычный веб-сайт и улучшим его с помощью 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, завершен.

302 Found

Found

The document has moved here.