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

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

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

Шаг 1

Прежде всего, скачайте последнюю стабильную версию jQuery и дайте ссылку на нее в своем документе:

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

Сначала давайте загрузим библиотеку jQuery и запустим функцию, когда документ будет готов (когда загружен DOM).

  $ (документ) .ready (function () {
	 // Материал здесь
 }); 

Шаг 2

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

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

  $ ('# nav li a'). click (function () {
	 // функция здесь
 }); 

Давайте подведем итог, что мы хотим, чтобы эта функция делала в порядке событий:

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

Нам нужно определить, с какой страницы получать данные при нажатии на ссылку. Все, что нам нужно сделать, — это получить атрибут href по нажатой ссылке и определить его как страницу, с которой нужно вызывать данные, плюс нам нужно определить местонахождение запрашиваемой страницы, с которой нужно извлечь данные, т.е. Вы хотите получить ВСЕ данные, только данные внутри div ‘content’, поэтому:

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

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

  $ ( '# Содержание') скрыть ( 'быстро', LoadContent). 

Вышеприведенная функция «скрывает» #content div с высокой скоростью, и как только этот эффект завершается, она запускает функцию «loadContent» (загрузка нового содержимого [через ajax]) — функцию, которую мы определим позже (на шаге 4 ).

Шаг 3

После того, как старый контент исчезает с удивительным эффектом, мы не хотим оставлять пользователей интересующимися до того, как новый контент появится (особенно если у них медленное интернет-соединение), поэтому мы создадим небольшую «загрузочную» графику, чтобы они знали что-то происходит на заднем плане:

  $ ('# wrapper'). append ('<span id = "load"> LOADING ... </ span>');
 $ ( '# Загружаем') FadeIn ( 'нормальный'). 

Вот CSS, примененный к недавно созданному div #load:

Таким образом, по умолчанию для этого диапазона загрузки установлено значение display: none, но когда инициируется функция fadeIn (в приведенном выше коде), она будет перетекать в верхний правый угол сайта и отображать наш анимированный GIF, пока не будет снова исчез.

Шаг 4

До сих пор, когда пользователь нажимает на одну из ссылок, происходит следующее:

1. Текущий контент исчезает с классным эффектом
2. Появляется сообщение о загрузке

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

  function loadContent () {
	 $ ( '# Содержание'). Нагрузка (toLoad, '', showNewContent)
 } 

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

  function showNewContent () {
	 . $ ( '# Содержание') показывает ( 'нормальное', hideLoader);
 } 

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

  function hideLoader () {
	 $ ( '# Загружает') Затухание ( 'нормальные').
 } 

Мы должны помнить, что нужно возвращать false в конце нашей функции щелчка — это так, чтобы браузер не переходил на страницу

Это должно работать отлично сейчас. Вы можете увидеть пример этого здесь: [ССЫЛКА]

Вот код на данный момент:

  $ (документ) .ready (function () {

     $ ('# nav li a'). click (function () {
    
     var toLoad = $ (this) .attr ('href') + '#content';
     $ ( '# Содержание') скрыть ( 'быстро', LoadContent).
     $ ( '# Загружаем') удалить ().
     $ ('# wrapper'). append ('<span id = "load"> LOADING ... </ span>');
     $ ( '# Загружаем') FadeIn ( 'нормальный').
     function loadContent () {
    	 $ ( '# Содержание'). Нагрузка (toLoad, '', showNewContent ())
     }
     function showNewContent () {
    	 . $ ( '# Содержание') показывает ( 'нормальное', hideLoader ());
     }
     function hideLoader () {
    	 $ ( '# Загружает') Затухание ( 'нормальные').
     }
     вернуть ложь;
    
     });
 }); 

Шаг 5

Вы можете остановиться на этом, но если вы беспокоитесь о юзабилити (что и должно быть), важно сделать немного больше работы. Проблема нашего текущего решения заключается в том, что он игнорирует URL. Что если пользователь захочет дать ссылку на одну из «страниц»? — У них нет возможности сделать это, потому что URL всегда один и тот же.

Таким образом, лучший способ сделать это — использовать значение ‘hash’ в URL, чтобы указать, что просматривает пользователь. Таким образом, если пользователь просматривает контент «о», то 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');
     если (хэш == href.substr (0, href.length-5)) {
         var toLoad = hash + '. html #content';
         $ ( '# Содержание'). Нагрузка (toLoad)
     } 
 }); 

С этим здесь включен весь необходимый код javascript: (плюс библиотека jQuery)

  $ (документ) .ready (function () {
	
     // Проверяем значение хеша в URL
     var hash = window.location.hash.substr (1);
     var href = $ ('# nav li a'). each (function () {
         var href = $ (this) .attr ('href');
         если (хэш == href.substr (0, href.length-5)) {
             var toLoad = hash + '. html #content';
             $ ( '# Содержание'). Нагрузка (toLoad)
         } 
     });
    
     $ ('# nav li a'). click (function () {
    
     var toLoad = $ (this) .attr ('href') + '#content';
     $ ( '# Содержание') скрыть ( 'быстро', LoadContent).
     $ ( '# Загружаем') удалить ().
     $ ('# wrapper'). append ('<span id = "load"> LOADING ... </ span>');
     $ ( '# Загружаем') FadeIn ( 'нормальный').
     window.location.hash = $ (this) .attr ('href'). substr (0, $ (this) .attr ('href'). length-5);
     function loadContent () {
    	 $ ( '# Содержание'). Нагрузка (toLoad, '', showNewContent ())
     }
     function showNewContent () {
    	 . $ ( '# Содержание') показывает ( 'нормальное', hideLoader ());
     }
     function hideLoader () {
    	 $ ( '# Загружает') Затухание ( 'нормальные').
     }
     вернуть ложь;
    
     });
 }); 

Законченный…

Отличительной особенностью этого метода является то, что он адаптируется и может быть применен к сайту за считанные минуты. Это совершенно незаметно, и веб-сайт будет работать нормально, если у пользователя отключен JS.

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

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