—»     —»   Динамическое извлечение популярных снимков Dribbble при помощи jQuery
  Раздел: Руководства   Нет комментариев  

Динамическое извлечение популярных снимков Dribbble при помощи jQuery



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

В данном руководстве мы хотим рассказать вам о том, как создать небольшое веб-приложение, которое будет динамически извлекать самые популярные работы из Dribbble. Интерфейс довольно прост, и мы хотим сделать так, чтобы все эффекты происходили без перезагрузки страницы. Для организации данных внутреннего интерфейса мы воспользуемся специальным jQuery-плагином под названием jribbble. Он отлично подходит для наших требований и с ним очень просто работать – даже javascript-новичок сможет разобраться всего за пару часов.

Динамическое извлечение популярных снимков Dribbble при помощи jQuery

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


Структура исходной страницы

Здесь мы не будем рассматривать HTML, но нам хотелось бы представить библиотеку, с которой мы будем работать. Сначала мы включаем ссылку на последнюю версию jQuery, размещенную на Google. Также мы включаем библиотеку HTML5shiv для поддержки старых версий IE.

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dribbble Popular API with jQuery</title>
<meta name="author" content="Jake Rocheleau">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jribbble.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

Сейчас вам понадобится включить в страницу локальную копию библиотеки Jribbble. Вы можете скачать последнюю версию в zip-архиве прямо с Github. Любые дальнейшие изменения или обновления в коде будут напрямую выводиться в репозиторий в реальном времени. Внутри папки вы можете видеть множество тестовых файлов. Но все, что нам нужно это скопировать файл dist/jquery.jribbble-1.0.0.ugly.js. Мы назвали его jquery.jribbble.min.js, и поместили его внутри нашего корневого каталога.

Когда мы включим эту библиотеку, сможем создать на самом деле простую функцию, которая будет вносить все изменения во внутренний интерфейс. Официальный сайт предлагает некоторые примеры кода для того, чтобы настроить плагин. Мы будем включать весь javascript локально внутрь файла index.html, это упростит нашу задачу.

Наполнение контентом посредством Ajax

Еще один интересный блок нашей HTML-страницы находится внутри основной оболочки. Мы создали 2 основные области, которые будут содержать актуальные снимки и навигационное меню. Код страницы выглядит следующим образом:

<nav>
<a href="#" id="p1" class="pagination sel">1</a>
<a href="#" id="p2" class="pagination">2</a>
<a href="#" id="p3" class="pagination">3</a>
<a href="#" id="p4" class="pagination">4</a>
<a href="#" id="p5" class="pagination">5</a>
<a href="#" id="p6" class="pagination">6</a>
<a href="#" id="p7" class="pagination">7</a>
<a href="#" id="p8" class="pagination">8</a>
<a href="#" id="p9" class="pagination">9</a>
</nav>

<div id="container">
<ul id="shotsListing" class="clearfix">
<strong>Loading...</strong>
</ul>
</div>

Внутри меню навигации мы начинаем с первой страницы всех популярных результатов. Эта анкорная ссылка имеет дополнительный класс .sel, который отвечает за выделенный элемент. По мере того, как вы кликаете по ссылкам, этот класс будет перемещаться на соответствующие страницы.

Также внутри контейнера у нас есть div с id #shotsListing. У вас должна быть цель в DOM, чтобы Jribbble мог в нее бросать все результаты. Так как мы производим это действие при первой загрузке страницы, то у нас отображается лишь надпись «Loading…». Она уходит сразу же, как мы получаем первые ответные данные и начинам наполнять внутренний контент.

Излечение первой страницы

Теперь в самом низу страницы перед закрывающим тегом body мы открываем новый блок скрипта. Внутри него мы используем код, необходимый для парсинга первой страницы снимков Dribbble. Также нам нужно обрабатывать клики по ссылкам навигации, чтобы новые страницы загружались автоматически без перезагрузки страницы.

Мы расположим наш Jribbble-запрос в функцию javascript с переменной parameter для номера страницы. Затем мы просто запускаем эту функцию и вносим номер, который нам нужен, отображая результаты на странице.

function getShotsList(p){
$.jribbble.getShotsByList("popular", function(data){
var html = [];

Итак, у нас есть новая функция getShotsList(), которая осуществляет доступ к параметру $.jribbble.getShotsByList. Внутрь этой функции нам нужно внести некоторые параметры – первый отвечает за тип нужных нам результатов, который в данном случае представляет собой популярные снимки. А второй параметр – это функция обратного вызова, которая необходима нам для отображения данных на странице. Теперь все может показаться сложным, но мы постараемся объяснить все как можно проще.

$.each(data.shots, function (i, shot) {
html.push('<li>');
html.push('<div class="details"><h3>' + shot.title + '</h3>');
html.push('<h4>by <a href="' + shot.player.url + '">' + shot.player.name + '</a></h4></div>');
html.push('<a href="' + shot.url + '" target="_blank" class="linkc">');
html.push('<img src="' + shot.image_teaser_url + '" alt="' + shot.title + '">');
html.push('</a></li>');
});

$('#shotsListing').html(html.join(''));
}, {page: p, per_page: 15});
}

HTML-переменная сперва определяется как пустой массив. jQuery.each() – это функция библиотеки, которая представляет собой нечто похожее на цикл foreach() в PHP. Мы зацикливаем возвратные Ajax-данные внутри data.shots – просто массив JSON-контента. Внутри функции loop нам нужно создать весь необходимый HTML-код для каждого отдельного снимка.

Мы используем javascript-метод .push() для того, чтобы уместить большие данные в массив content. Каждая страница ограничена 15 снимками, поэтому цикл будет произведен 15 раз, извлекая ту же самую HTML-структуру с разными данными. Обратите внимание на то, что как только мы закрываем обе эти функции, у нас остается еще 2 параметра, которые необходимо внести в Jribbble. Первый заключается в номере текущей страницы, который мы обозначили символом p. За ним следует лимит снимков на странице, в котором используется значение 15, так как это максимальный лимит в родном АПИ от Dribbble.

Не стоит сильно беспокоиться, если вы не можете понять синтаксис цикла each(). Если вы не знакомы с процессом зацикливания JSON-контента, то он может показаться абсолютно непонятным. Но если вы выделите немного времени на практику, и ознакомитесь с документацией, то все окажется довольно простым.

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

Также внутри этого блока нам нужно обернуть нашу новую функцию внутрь выражения document.ready(). Если мы все сделаем правильно, то нам должна потребоваться всего одна строка кода для того, чтобы отображить результаты нашей первой страницы. Сейчас блок скрипта должен выглядеть следующим образом:

$(document).ready(function(){
getShotsList(1);

// function code here
});

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

Этот финальный блок является контроллером событий, который проверяет страницу, когда пользователь кликает по ссылкам навигации. Вы можете расположить его либо перед кодом функции, либо после него, но он должен быть в рамках document.ready().

$("nav .pagination").click(function(e){
e.preventDefault();

$(this).siblings(".sel").removeClass("sel");
$(this).addClass("sel");

var newnum = $(this).html();
getShotsList(newnum);
});

Переменная e – это наше событие, которое следит за кликами пользователей. Мгновенный запуск e.preventDefault() предотвратит загрузку браузером значения href в адресную строку. Затем следующие 2 строки кода исключат класс .sel из всех примыкающих ссылок, чтобы применить его к ссылке выбранной нами страницы.

Затем, наконец, нам нужно определить, на что выставлен номер текущей страницы. Мы также можем использовать id с цифрами, но вместо этого мы воспользовались внутренним HTML-значением ссылки. Эти анкорные ссылки представляют собой простые цифры, которые могут быть внесены в функцию getShotsList() для динамического обновления страницы.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

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

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

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


Бухгалтерское обслуживание ИП и ООО www.топбухгалтер.рф
топбухгалтер.рф
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930