—»     —»   Загрузка и анимация контента посредством jQuery
  Раздел: Библиотеки скриптов   Нет комментариев  

Загрузка и анимация контента посредством jQuery



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

Демо: Загрузка и анимация контента посредством jQuery

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

Загрузка и анимация контента посредством jQuery

<!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&#8243; />  
<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  
});

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

1. Очистка активного содержимого.
2. Подгрузка нового содержимого страницы и его привязка к "DIV".

Нам нужно указать, какую страницу нужно подгружать после того, как был сделан клик по ссылке. Все что от нас требуется, это указать атрибут «href» на ссылке таким образом, чтобы система понимала, какое содержимое и откуда нужно подгружать – указать месторасположение страницы, с которой требуется загрузить содержимое. Т.е. нам не нужно, чтобы подгружалась вся страница целиком – нам нужно только содержимое div’а «content».

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

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

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

Представленная выше функция быстро скрывает div «content», а после того, как «скрытие» полностью завершится, запускается функция «loadContent» (подгрузка нового содержимого посредством AJAX) – данную функцию мы укажем позже в 4 этапе.

Этап 3

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

Загрузка и анимация контента посредством jQuery

$(‘#wrapper’).append(‘<span id=”load”>LOADING…</span>’);   
$(‘#load’).fadeIn(‘normal’);

Код CSS, примененный для созданного div’а «#load»:

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

Итак, по стандарту у «load» значение span стоит, как «display:none», но после того, как запускается функция «fadeIn» (что в коде выше), содержимое «load» насчет появляется в правом верхнем углу веб-страницы и будет отображать наше анимированное GIF-изображение до тех пор, пока не исчезнет снова.

Этап 4

Итак, как только пользователь кликает по одной из ссылок, происходит следующее:

1. Действующее содержимое исчезает в сопровождении приятного визуального эффекта
2. Появляется сообщение о состоянии загрузки

Теперь, давайте напишем функцию «loadContent», о которой мы упомянули ранее:

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

Данная функция посылает запрос на указанную страницу, и как только все загружено, запускается функция «showNewContent»:

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

Функция «showNewContent» использует jQuery-функцию «show» (что, кстати, достаточно нудное имя для такого отличного эффекта) для того, чтобы отобразить новое содержимое внутри div’а «#content». Как только была вызвана данная функция, сразу же запускается функция скрытия отображения состояния загрузки – «hideLoader»:

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

Не забудьте указать значение «return false» на конце функции – для того, чтобы браузер не переходил на другую страницу.

То, что мы только что написали, уже должно работать прекрасно.

Вот код:

$(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, для того, чтобы указать на то, что пользователь просматривает в данный момент. Например, если пользователь смотрит содержимое «О нас», то ссылка может быть: «www.ваш.сайт/#about». Нам понадобится добавить всего одну строку в код функции «click» для того, чтобы хэш добавился в адрес, когда пользователи кликает по ссылкам:

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

Код, представленный выше, заменяет значение хэша адреса на значение атрибута «href» нажатой ссылки (минус расширение .html). Например, когда пользователь кликает по ссылке «На главную» (href=index.html), то в адресе будет отображено хэш значение «#index».

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

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.

Скачать архив с материалом:
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, скрипты, ajax
Опубликовал Mysterious Master   Прочитано (раз): 15771   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2019    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031