—»     —»   43 jQuery-плагина для управления touch-событиями
  Раздел: Тематические обзоры   Нет комментариев  

43 jQuery-плагина для управления touch-событиями



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

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

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

01. Hammer.js

43 jQuery-плагина для управления touch-событиями

Hammer.js – это js-библиотека, которая может быть использована для управления жестами на сенсорных устройствах. Она поддерживает следующие жесты: нажатие, двойное нажатие, удерживание, перетаскивание, пролистывание, трансформация (щепотка).

02. iScroll 4

43 jQuery-плагина для управления touch-событиями

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

03. Ember.js

43 jQuery-плагина для управления touch-событиями

Ember – это javascript-платформа для создания амбициозных веб-приложений, которые исключают шаблон и предлагают стандартную архитектуру приложения.

04. jquery.pep.js

43 jQuery-плагина для управления touch-событиями

Pep была разработан ввиду необходимости организовать поддержку кинетического перетягивания как для мобильных, так и для настольных устройств (нажать и тащить). Она использует лучшие функции анимации jQuery, а также CSS3-анимации для того, чтобы предоставлять кинетическое перетаскивание на высшем уровне. Библиотека отлично работает на устройствах, подготовленных для работы с HTML5.

05. Swipe

43 jQuery-плагина для управления touch-событиями

Swipe – это миниатюрный мобильный слайдер с шагом прикосновения 1:1, предотвращением прокрутки и ограничивающими рамками.

06. Overscroll

43 jQuery-плагина для управления touch-событиями

Overscroll представляет собой jQuery-плагин, который имитирует опыт взаимодействия прокрутки iphone/ipad в браузере. Плагин добавляет перетаскиваемую сноску для дополнительных DOM-элементов. OverScroll лучше всего работает на Safari 5+, Chrome 5+ и Firefox 3+, но должен так же хорошо работать во всех современных браузерах. По ссылке вы можете найти интерактивное демо, чтобы увидеть плагин в действии, а также инструкции по использованию его в собственных веб-приложениях.

07. Swiper

43 jQuery-плагина для управления touch-событиями

Swiper – это бесплатный и ультра-миниатюрный мобильный сенсорный слайдер с переходами, подкрепленными аппаратным ускорением (где это поддерживается), а также невероятным родным поведением. Он предназначен для использования в мобильных веб-сайтах, мобильных веб-приложениях, а также родных мобильных приложениях. Изначально он создавался под iOS, но также подходит для Android и браузеров настольных ПК.

08. Мультитач для вашего настольного браузера

43 jQuery-плагина для управления touch-событиями

В мобильной разработке зачастую проще начать разработку прототипа на настольном пк, а уже затем работать над мобильными элементами, используя устройства, которые и должны поддерживаться. Мультитач – это такое свойство, которое крайне сложно протестировать на настольном ПК, так как большинство компьютеров не имеют сенсорных дисплеев, соответственно в настольных браузерах даже нет такой поддержки. Сегодня все изменилось. Большинство новых Mac, например, поставляются уже с поддержкой мультитач. К сожалению, сами браузеры пока еще не оснащены поддержкой.

09. Генерализированный ввод в кросс-устройственный Веб

43 jQuery-плагина для управления touch-событиями

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

10. FlipPage

43 jQuery-плагина для управления touch-событиями

11. jQuery Mobile: touch-оптимизированная веб-платформа для смартфонов и планшетов

43 jQuery-плагина для управления touch-событиями

Унифицированная HTML5-система пользовательского интерфейса для всех популярных платформ мобильных устройств, разработанная на базе jQuery и jQuery UI. Ее облегченный код был разработан с использованием прогрессивных расширений, а платформа способна предложить вам гибкий дизайн с возможностью смены шаблонов.

12. jQuery UI Touch Punch

43 jQuery-плагина для управления touch-событиями

Touch Punch – это хак. Он использует некоторый функционал jQuery UI для обработки touch-событий. Touch Punch работает со всеми базовыми jQuery UI-виджетами и взаимодействиями.

13. Touchy

43 jQuery-плагина для управления touch-событиями

Touchy – это jQuery-плагин для управления touch-событиями и жестами в браузерах семейства WebKit (Mobile Safari или Android Browser), либо в любом другом браузере, где есть поддержка событий ontouchstart, ontouchmove и ontouchend.

Он создает новые пользовательские события, которые программист может использовать на высшем уровне (например, touchy-pinch и touchy-rotate), и избежать работы над комбинированием событий touch и жестов для получения общих контроллеров.

14. Zynga Scroller

43 jQuery-плагина для управления touch-событиями

Чисто логический компонент для скроллинга и масштабирования. Он независим от какого-либо типа системы рендера или событий.

15. jGestures: jQuery-плагин для обработки жестов

43 jQuery-плагина для управления touch-событиями

jQuery-плагин позволяет вам добавлять такие жесты, как: ‘pinch’, ‘rotate’, ‘swipe’, ‘tap’ и ‘orientationchange’, а также родные события jQuery. Он включает замещение событий: событие tapone может быть запущено посредством clicking, событие swipe может быть запущено посредством жеста курсором мыши.

16. TouchScroll, слой прокрутки для мобильных WebKit-браузеров

43 jQuery-плагина для управления touch-событиями

17. Touchy.js

43 jQuery-плагина для управления touch-событиями

18. Tappable

43 jQuery-плагина для управления touch-событиями

Tappable – это простая отдельная библиотека для обработки события нажатия для touch-дружественных браузеров. На данный момент она была протестирована только в iOS Mobile Safari, так как у разработчиков в расположении не оказалось других смартфонов.

19. pull-to-refresh.js

43 jQuery-плагина для управления touch-событиями

Данный плагин позволяет вам оттягивать страницу вниз для обновления функционала в мобильном браузере Safari.

20. Создание быстрых кнопок для мобильных веб-приложений

43 jQuery-плагина для управления touch-событиями

21. dojox.gesture

43 jQuery-плагина для управления touch-событиями

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

22. dojo.touch

43 jQuery-плагина для управления touch-событиями

Этот модуль предоставляет унифицированный набор событий прикосновений: “press | move | release | cancel”, которые можно запускать на большом диапазоне устройств (включая браузеры настольных ПК).

23. Overthrow

43 jQuery-плагина для управления touch-событиями

Цели Overthrow просты: создание надежного метода безопасного использования CSS overflow в адаптивных дизайнах, поддержка polyfill в неродных средах, где это возможно. В целом, задача предельно ясна, и разработчики стараются сделать все возможное для совершенствования этих целей и инструментов вместо того, чтобы добавлять новые свойства.

24. jQuery Mobile: Плагин Pagination

43 jQuery-плагина для управления touch-событиями

25. thumbs.js: добавляем touch-поддержку в браузер

43 jQuery-плагина для управления touch-событиями

26. TouchSwipe: jQuery-plugin для сенсорных устройств

43 jQuery-плагина для управления touch-событиями

TouchSwipe представляет собой jquery-plugin для того, чтобы использовать jQuery на сенсорных устройствах вроде iPad, iPhone и так далее.

27. Phantom Limb

43 jQuery-плагина для управления touch-событиями

Итак, вам наверняка известно, что при взломе и «переработке» того или иного веб-приложения (предположим, что оно принадлежит вам), вам нужно будет провести работу над ошибками, но консоль дебаггинга в Safari довольно бесполезна, поэтому все закончится лишь тем, что вы получите несколько предупреждений в стиле 1997 года. Было бы классно, если бы вы могли запустить свое приложение в полноценной версии Safari на вашем настольном ПК?

Именно в этом вам и поможет данный инструмент. Phantom Limb позволяет вам курсором мыши имитировать события вроде touchstart, touchmove и touchend.

28. energize.js

43 jQuery-плагина для управления touch-событиями

Порой сенсорные устройства создают искусственную задержку при прикосновениях, просто чтобы убедиться, что пользователь не целенаправленно нажимает два раза для увеличения. В тех случаях, когда вы можете спокойно отключать функционал двойного нажатия (либо в тех случаях, когда вы отключаете возможность увеличения окна просмотра), у вас нет никакой причины сохранять эту задержку. Именно в таких случаях energize.js приходит на помощь!

29. TipTap

43 jQuery-плагина для управления touch-событиями

Библиотека TipTap представляет собой js-библиотеку, которая облегчает возможность определения и управления комплексных жестов прикосновениями и курсором мыши на элементах HTML DOM (на SVG и Canvas также, правда, еще не было произведено тестирование), а также предлагает вам унифицированных способ управления различными системами ввода в устройствах: мышь, сенсоры, а также из специфической структуры данных (iOS, Android, Windows…) и так далее. На самом деле, эта библиотека направлена на мультитач-интерактивность, а не на устаревшую систему управления мышью. Но она, конечно же, поддерживает мышь.

30. DoubleTap для jQuery

43 jQuery-плагина для управления touch-событиями

31. Touche

43 jQuery-плагина для управления touch-событиями

Управление событиями мыши и прикосновений для тестирования сенсорных интерфейсов на настольных браузерах. Это означает, что touchstart, touchmove и touchend имитируются mousedown, mousemove и mouseend. Очень рекомендуем вам для тестирования.

32. jQuery.event.swipe

43 jQuery-плагина для управления touch-событиями

33. jQuery.event.move

43 jQuery-плагина для управления touch-событиями

34. toe.js

43 jQuery-плагина для управления touch-событиями

toe.js представляет собой миниатюрную библиотеку, основанную на jQuery, которая позволяет реализовать продуманную поддержку жестов на сенсорных устройствах.

35. Jester: простой способ распознания жестов на javascript

43 jQuery-плагина для управления touch-событиями

36. WKTouch

43 jQuery-плагина для управления touch-событиями

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

37. SwipeSlide: Zepto-плагин для создания навигации с пролистыванием в стиле iOS

43 jQuery-плагина для управления touch-событиями

38. Interact

43 jQuery-плагина для управления touch-событиями

Interact – это оболочка для событий управления мышью и прикосновений. Она нужна для организации процесса написания приложений/демо, которые обрабатывают touch-события, а также для упрощения написания.

39. Lightning Touch

43 jQuery-плагина для управления touch-событиями

Lightning Touch делает ссылки адаптивными без типичной задержки в несколько сотен миллисекунд.

40. jsTouchLayer

43 jQuery-плагина для управления touch-событиями

JS Touch Layer – это js-среда разработки, которая абстрагируется от понятия жеста. Она сама будет решать, когда нажатие – это нажатие, а пролистывание – это пролистывание. Среда разработки позволит вам привязывать функции к этим событиям и не заботиться о технической стороне.

41. Antiscroll

43 jQuery-плагина для управления touch-событиями

42. Touch-события и абстракции

43 jQuery-плагина для управления touch-событиями

43. Interaction

43 jQuery-плагина для управления touch-событиями

Данный инструмент – это основа создания взаимодействия. Взаимодействия имеют общую модель событий из 3 частей: start -> move(s) -> stop. Такая база взаимодействия служит в роли абстрактного слоя для событий любого устройства ввода, которое позволяет перемещение посредством такой модели событий. Например, drag-and-drop (для мыши), swipe/slide (touch-события) и так далее.

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

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

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

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


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


















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