Загрузка и анимация контента при помощи jQuery.

() translation by (you can also view the original English article)

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

1	<script type="text/javascript" src="jQuery.js"></script>

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

Первым делом, давайте загрузим библиотеку jQuery и вызовем функцию, когда документ готов к манипуляциям (когда DOM (Объектная модель документа. Здесь и далее примеч. пер.) загружена).

1
2	$(document).ready(function() {
3	// Stuff here
4	});

Шаг 2

Итак, мы хотим сделать следующее: когда пользователь кликает по ссылке внутри навигационного меню на нашей странице, браузер вместо перехода на соответствующую страницу загружает контент этой страницы в текущую.

Мы хотим выбрать ссылки внутри навигационного меню и вызвать функцию при клике на них:

1
2	$('#nav li a').click(function(){
3	// function here
4	});

Давайте подытожим действия функции по порядку событий:

Удаление контента текущей страницы.
Помещение контента новой страницы в блок DIV с содержимым.

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

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

Для иллюстрации работы вышеуказанного кода представим, что пользователь щелкает линк 'about', который ссылается на страницу 'about.html'. В данном случае значением переменной было бы: 'about.html #content'.Именно его мы и будем использовать в запросе AJAX. Однако для начала нам необходимо сделать изящный эффект для контента текущей страницы. Вместо простого удаления контента мы собираемся использовать функцию 'hide' jQuery следующим образом:

1
2	$('#content').hide('fast',loadContent);

Вышеупомянутый код "скрывает" #content div быстрыми темпами. После завершения эффекта происходит вызов функции 'loadContent', которая загружает новый контент при помощи запроса AJAX. Эту функцию мы определим позже (Шаг 4).

Шаг 3

Как только старый контент эффектно исчезает, нам не хотелось бы оставить пользователя просто гадать, все ли в порядке с приложением, до поступления нового контента (особенно, если у него медленное интернет-соединение). Поэтому мы создадим небольшой рисунок "загрузки", благодаря которому они будут знать, что что-то происходит на заднем плане.

1
2	$('#wrapper').append('<span id="load">LOADING...</span>');
3	$('#load').fadeIn('normal');

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


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

Как показано выше, по умолчанию для данного 'индикатора загрузки' span задано свойство display:none. Однако при вызове функции fadeIn (выше в коде) элемент появится в правом верхнем углу сайта вместе с анимированным изображением в формате GIF (* Graphics Interchange Format, формат обмена графическими данными).

Шаг 4

На данный момент при клике пользователем какой-либо ссылки произойдет следующее:

Эффектно исчезнет текущий контент.
Появится сообщение о загрузке.

Давайте теперь определим функцию loadContent, которую вызывали ранее:

1
2	function loadContent() {
3	$('#content').load(toLoad,'',showNewContent)
4	}

Функция loadContent запрашивает необходимую пользователю страницу и, как только запрос выполнен, вызывает функцию 'showNewContent':

1
2	function showNewContent() {
3	$('#content').show('normal',hideLoader);
4	}

Эта функция showNewContent использует функцию jQuery show (скучноватое название для осуществляемого ею крутого эффекта) для показа нового (запрашиваемого) контента в элементе div '#content'. После показа контента данная функция вызывает функцию 'hideLoader':

1
2	function hideLoader() {
3	$('#load').fadeOut('normal');
4	}

Следует помнить, что в конце функции нам необходимо «вернуть 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

На этом можно было бы остановиться. Однако, если вы заботитесь о usability (удобств и простота использования) вашего сайта (и стоило бы), то нужно добавить еще кое-что. Недостаток нашего подхода - пренебрежение URL-адресом (унифицированный указатель [местонахождения информационного] ресурса). Если бы пользователь захотел сослаться на одну из "страниц", у него бы не вышло, поскольку URL-адрес неизменен.

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

1
2	window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);

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

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


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. Веб-сайт будет нормально работать (* будет отображаться контент, но перестанут работать крутые эффекты jQuery) и при отключенном Javascript пользователя.

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

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