—»     —»   Hook.js для jQuery: для обновления нужно лишь только потянуть
  Раздел: Скрипты и коды   Комментариев: 1  

Hook.js для jQuery: для обновления нужно лишь только потянуть



Если нам не изменяет память, то впервые такой метод представила компания Apple. Или это была Loren Brichter в своем клиенте Tweetie. Мы не можем сказать с точной уверенностью, но это и не так важно. «Потяните, чтобы обновить» - это определенно такой тип функционала, который сегодня можно встретить практически в каждом приложение, по крайней мере если мы работаем в мобильных приложениях на смартфонах или планшетах. Jordan Singer и Brandon Jacoby недавно предложили такой же метод и на обычном сайте.

Hook.js для jQuery: для обновления нужно лишь только потянуть

Hook.js: Потяните, чтобы обновить

«Потяните, чтобы обновить», как мы знаем, действует по следующему принципу: мы проводим пальцем по сенсорному экрану, а затем резко палец откидываем. Таким образом, мы заставляем приложение обновить содержимое текущей страницы.

Если переносить подобный функционал на обычные сайты, то, казалось бы, нужно будет прокрутить страницу скроллингом в самый вверх, а затем «поддать» еще немного для того, чтобы обновить страницу. Но Hook.js действует немного не так.

Чтобы использовать «Потяните, чтобы обновить» при помощи Hook.js, вам нужно будет немного прокрутить страницу вниз, а затем крутнуть обратно, вверх. Нам кажется, что не все поймут с первого раза, как это сделать. Интуитивность – это точно не то слово, которое подошло бы к описанию данного скрипта. Пока что вряд ли можно сказать, что вокруг этого нововведения есть какой-то ажиотаж, но нам кажется, что идея определенно интересная, и ее можно сделать еще более интересной…

Для Hook.js требуется JQuery, а сам скрипт весит 2.5кб. Интеграция с сайтом довольно проста:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="hook/hook.css" type="text/css" />
<script src="hook/hook.js" type="text/javascript"></script>

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

Вся магия основана на этих строках кода, которые нужно поместить прямо под тег body:

<div id="hook">
<div id="loader">
<div class="spinner"></div>
</div>
<span id="hook-text">Reloading...</span>
</div>

Как видно, вы можете без труда изменить текст, отображаемый при загрузке. Конечно же, Hook.js будет работать только на тех сайтах, на которых он может быть востребован. Демо-сайт может вам поднадоесть после пары минут.

Тем не менее, идея невероятно интересна, и мы считаем, что здесь скрыт невероятный потенциал, который может вдохновить на новые прекрасные идеи. Как и в большинстве проектов на Github, мы были бы рады, если бы вы распространили эту информацию среди знакомых разработчиков.

Ссылки

* «Потяните, чтобы обновить» для традиционных сайтов - Usehook.com
* Hook.js | Github-репозиторий
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Design FactoRy   Прочитано (раз): 7041   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 29 марта 2013 @ 14:46
Написал: Прохожий — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
На мой взгляд скрипт не доработан т.к. обрабатывает любую прокрутку вверх, не зависимо от того была небольшая прокрутка или нет. Браузер Google Chrome 26-ой версии.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Международный сайт знакомств с иностранцами
Регистрация на сайте в один клик! Узнайте, кому нравитесь, прямо сейчас
meets.com
Хьюля
Вся правда о пылесосах Хьюля. Узнайте, что говорят покупатели
jemako-shop.ru
Испания апартаменты
Агентство зарубежной недвижимости. Аренда вилл.
costagarant.com
Популярные публикации


















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