Как динамически загружать и анимировать загрузку содержимого с помощью jQuery.

16.01.2010 Рубрика: Обучение \ Javascript&Ajax

Share |

jQuery

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

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

Также скачайте исходники себе на компьютер!

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

<!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><a href="index.html">welcome</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="portfolio.html">portfolio</a></li>
        <li><a href="contact.html">contact</a></li>
        <li><a href="terms.html">terms</a></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’:

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

Чтобы наглядно продемонстрировать, что делает вышеуказанный код, давайте представим, что пользователь нажимает на ссылку ‘about’ , которая связана со страницей ‘about.html’ – в этой ситуации переменной будет: ‘about.html #content’ – и это именно та переменная, которую мы будем запрашивать при простом вызове. Однако первое, с чего мы начнем – это создадим красивый эффект для содержимого текущей страницы. Вместо того, чтобы оно просто исчезало, мы используем функцию «скрывания» jQuery:

$('#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('&lt;span id=&quot;load&quot;&gt;LOADING...&lt;/span&gt;');
    $('#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('&lt;span id=&quot;load&quot;&gt;LOADING...&lt;/span&gt;');
    $('#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.

Посмотреть полностью работающий пример

Автор: James Padolsey

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

Источник: http://net.tutsplus.com

E-mail: contact@webformyself.com

Проект webformyself.com – Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал? Если ответ «Да», то жмите сюда.

Метки: Ajax, JavaScript, Javascript&Ajax, меню

Комментарии (12)

Валерий Васильевич
17.01.2010 в 10:10

Ребята, я бы очень хотел, что бы не затрачивать время на знакомство с Вашими обучающими материалами, а сразу, просто кликать и скачивать всё необходимое, по созданию сайте. Прежде всего на бесплатных пока ресурсах. потому как платные для меня —пока не доступны(ни хостинг ни другие). Хотелось бы, что бы это—было представлено просто с нуля. Скажем….для создания своего сайта, войдите на такой ресурс. Потом …теперь выберете себе шаблон оформления главной страницы,(кликайте сюда), потом Выбираем заголовок,как его оформить(кликайте сюда). Потом —начинаем работать с меню(заполняем соответствующие графы,вводим всплывающие ссылки по рассылке, по подаче объявлений, по регистрации клиентов,с оставлением адресов, по автоматизации процесса ответов на рассылки,по анимационному «волшебнику», —программа, которая помогает приглашать клиентов на сайт,ну и т.д. Вот это был бы класс. А то , пока я всё прочту, пока познакомлюсь со всеми деталями—-то я всё что читал в начале—половину забуду.И опять возвращайся к началу. Понимаете?

Нравится или не нравится: 0 0

Ответить
- Sirius
  19.01.2010 в 08:16
  
  Вот ссылка на подобную тему вашей просьбы: http://uploading.com/files/54b88f21/NamoWebEditor8DeuTrial.exe
  Простой конструктор сайтов для начинающих.
  
  Нравится или не нравится: 0 1
  
  Ответить
  - Alexandr
    02.11.2010 в 23:15
    
    файла не существует, удалён…
    
    Нравится или не нравится: 1 0
    
    Ответить
DN
03.10.2010 в 20:06

Очень хорошоя статья, долго искал инструкции по созданию подобного меню. Только вот еще бы ссылки на исходники подправить , а то новичку трудновато понять)))

Нравится или не нравится: 0 0

Ответить
Volt
09.01.2011 в 01:06

Наконец-то! Спасибо!

Нравится или не нравится: 0 0

Ответить
Pocherk
29.01.2011 в 10:54

Клево! Очень пригодится

Нравится или не нравится: 0 0

Ответить
Вера
16.05.2011 в 22:17

Вот спасибо большинское! Как мне во-время попалась ваша статья!! очень интересно и доступно! Второй урок разбираю у вас – этот и ‘Панель для сайта в стиле MacOS с помощью jquery’ все понятно и полезно, думаю все до строчечки проработать,
что вы здесь нам даете. Спасибо сто раз!

Нравится или не нравится: 0 0

Ответить
Den
30.05.2011 в 16:55

Спасибо афтару.
Соорудил небольшой блок для формы… пользовал твой код… симпотно!

Нравится или не нравится: 0 0

Ответить
Pocherk
29.08.2011 в 07:13

Все здорово и красиво, но смущает один момент – все ссылки на сайте, сделаные по такой технологии будут вида: http://мой_домен/index.html#мое_слово т.е. поисковые системы будут считать, что на сайте только одна страница – index.html А это не есть хорошо, для поисковой оптимизации сайта

Нравится или не нравится: 0 0

Ответить
popo
15.10.2011 в 18:09

Скажите, а как сделать что бы всё тоже самое происходило не при клике на ссылку, а на кнопку формы?

Нравится или не нравится: 0 0

Ответить
Polina
18.11.2011 в 10:31

единственная проблема – навигация браузера (стрелки назад и вперед) не работают – url меняют, а контент нет

Нравится или не нравится: 0 0

Ответить
dimaz
01.02.2012 в 21:15

Еще на этом примере, если загружаемый файл в формате html, то при нажатии ф5, страница остается прежней, а если загружать php, то страница скидывается на изначальную.

Нравится или не нравится: 0 0

Ответить