24.05.13, 13:40
0 комментарий
  Скрипты

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

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

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

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

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

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

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

В зону head вставить:

<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, мы были бы рады, если бы вы распространили эту информацию среди знакомых разработчиков.

СКАЧАТЬ

Вес файла
38.16 Kb

Напишите своё мнение