Вместе с проблемой пришло и решение, даже множество решений, большинство из которых было основано на jQuery-плагинах, способных обрабатывать touch-события определенным образом, позволяет избежать багов и предоставить четкий функционал пользователю смартфона, который посещает тот или иной сайт или использует какое-то приложение.
Мы предполагаем, вам казалось, что таких плагинов не так много, но вы будете удивлены, узнав, сколько их существует на самом деле. В зависимости от того, что вы хотите использовать, плагины будут отличаться в размере или набором функций. Сегодня мы хотим предложить вам расширенный список, из которого вы точно подберете себе самый подходящий вариант.
01. Hammer.js
Hammer.js – это js-библиотека, которая может быть использована для управления жестами на сенсорных устройствах. Она поддерживает следующие жесты: нажатие, двойное нажатие, удерживание, перетаскивание, пролистывание, трансформация (щепотка).
02. iScroll 4
iScroll, наконец-то, вышел в полной версии. Теперь она работает гораздо более плавно, чем раньше, и оснащена новыми важными функциями: щепотка/масштабирование, перетаскивание вниз для обновления, привязка к элементам и множество пользовательских событий, которые способствуют более гибкой настройке.
03. Ember.js
Ember – это javascript-платформа для создания амбициозных веб-приложений, которые исключают шаблон и предлагают стандартную архитектуру приложения.
04. jquery.pep.js
Pep была разработан ввиду необходимости организовать поддержку кинетического перетягивания как для мобильных, так и для настольных устройств (нажать и тащить). Она использует лучшие функции анимации jQuery, а также CSS3-анимации для того, чтобы предоставлять кинетическое перетаскивание на высшем уровне. Библиотека отлично работает на устройствах, подготовленных для работы с HTML5.
05. Swipe
Swipe – это миниатюрный мобильный слайдер с шагом прикосновения 1:1, предотвращением прокрутки и ограничивающими рамками.
06. Overscroll
Overscroll представляет собой jQuery-плагин, который имитирует опыт взаимодействия прокрутки iphone/ipad в браузере. Плагин добавляет перетаскиваемую сноску для дополнительных DOM-элементов. OverScroll лучше всего работает на Safari 5+, Chrome 5+ и Firefox 3+, но должен так же хорошо работать во всех современных браузерах. По ссылке вы можете найти интерактивное демо, чтобы увидеть плагин в действии, а также инструкции по использованию его в собственных веб-приложениях.
07. Swiper
Swiper – это бесплатный и ультра-миниатюрный мобильный сенсорный слайдер с переходами, подкрепленными аппаратным ускорением (где это поддерживается), а также невероятным родным поведением. Он предназначен для использования в мобильных веб-сайтах, мобильных веб-приложениях, а также родных мобильных приложениях. Изначально он создавался под iOS, но также подходит для Android и браузеров настольных ПК.
08. Мультитач для вашего настольного браузера
В мобильной разработке зачастую проще начать разработку прототипа на настольном пк, а уже затем работать над мобильными элементами, используя устройства, которые и должны поддерживаться. Мультитач – это такое свойство, которое крайне сложно протестировать на настольном ПК, так как большинство компьютеров не имеют сенсорных дисплеев, соответственно в настольных браузерах даже нет такой поддержки. Сегодня все изменилось. Большинство новых Mac, например, поставляются уже с поддержкой мультитач. К сожалению, сами браузеры пока еще не оснащены поддержкой.
09. Генерализированный ввод в кросс-устройственный Веб
Скоро мышь уже не будет настолько доминирующим устройством ввода в компьютерах, несмотря даже на то, что никто не планирует ее ликвидировать в ближайшем обозримом будущем. Touch скоро взойдет на трон устройств ввода, и Сеть должна быть готова к этому. К сожалению, текущее положение инструментов ввода в Сети представляет собой нечто вроде беспорядка!
10. FlipPage
11. jQuery Mobile: touch-оптимизированная веб-платформа для смартфонов и планшетов
Унифицированная HTML5-система пользовательского интерфейса для всех популярных платформ мобильных устройств, разработанная на базе jQuery и jQuery UI. Ее облегченный код был разработан с использованием прогрессивных расширений, а платформа способна предложить вам гибкий дизайн с возможностью смены шаблонов.
12. jQuery UI Touch Punch
Touch Punch – это хак. Он использует некоторый функционал jQuery UI для обработки touch-событий. Touch Punch работает со всеми базовыми jQuery UI-виджетами и взаимодействиями.
13. Touchy
Touchy – это jQuery-плагин для управления touch-событиями и жестами в браузерах семейства WebKit (Mobile Safari или Android Browser), либо в любом другом браузере, где есть поддержка событий ontouchstart, ontouchmove и ontouchend.
Он создает новые пользовательские события, которые программист может использовать на высшем уровне (например, touchy-pinch и touchy-rotate), и избежать работы над комбинированием событий touch и жестов для получения общих контроллеров.
14. Zynga Scroller
Чисто логический компонент для скроллинга и масштабирования. Он независим от какого-либо типа системы рендера или событий.
15. jGestures: jQuery-плагин для обработки жестов
jQuery-плагин позволяет вам добавлять такие жесты, как: ‘pinch’, ‘rotate’, ‘swipe’, ‘tap’ и ‘orientationchange’, а также родные события jQuery. Он включает замещение событий: событие tapone может быть запущено посредством clicking, событие swipe может быть запущено посредством жеста курсором мыши.
16. TouchScroll, слой прокрутки для мобильных WebKit-браузеров
17. Touchy.js
18. Tappable
Tappable – это простая отдельная библиотека для обработки события нажатия для touch-дружественных браузеров. На данный момент она была протестирована только в iOS Mobile Safari, так как у разработчиков в расположении не оказалось других смартфонов.
19. pull-to-refresh.js
Данный плагин позволяет вам оттягивать страницу вниз для обновления функционала в мобильном браузере Safari.
20. Создание быстрых кнопок для мобильных веб-приложений
21. dojox.gesture
Данный модуль предоставляет механизм для написания удобных событий жестов, которые можно запускать на большом диапазоне устройств (большинство событий жестов в одно касание также могут работать и на настольных браузерах).
22. dojo.touch
Этот модуль предоставляет унифицированный набор событий прикосновений: “press | move | release | cancel”, которые можно запускать на большом диапазоне устройств (включая браузеры настольных ПК).
23. Overthrow
Цели Overthrow просты: создание надежного метода безопасного использования CSS overflow в адаптивных дизайнах, поддержка polyfill в неродных средах, где это возможно. В целом, задача предельно ясна, и разработчики стараются сделать все возможное для совершенствования этих целей и инструментов вместо того, чтобы добавлять новые свойства.
24. jQuery Mobile: Плагин Pagination
25. thumbs.js: добавляем touch-поддержку в браузер
26. TouchSwipe: jQuery-plugin для сенсорных устройств
TouchSwipe представляет собой jquery-plugin для того, чтобы использовать jQuery на сенсорных устройствах вроде iPad, iPhone и так далее.
27. Phantom Limb
Итак, вам наверняка известно, что при взломе и «переработке» того или иного веб-приложения (предположим, что оно принадлежит вам), вам нужно будет провести работу над ошибками, но консоль дебаггинга в Safari довольно бесполезна, поэтому все закончится лишь тем, что вы получите несколько предупреждений в стиле 1997 года. Было бы классно, если бы вы могли запустить свое приложение в полноценной версии Safari на вашем настольном ПК?
Именно в этом вам и поможет данный инструмент. Phantom Limb позволяет вам курсором мыши имитировать события вроде touchstart, touchmove и touchend.
28. energize.js
Порой сенсорные устройства создают искусственную задержку при прикосновениях, просто чтобы убедиться, что пользователь не целенаправленно нажимает два раза для увеличения. В тех случаях, когда вы можете спокойно отключать функционал двойного нажатия (либо в тех случаях, когда вы отключаете возможность увеличения окна просмотра), у вас нет никакой причины сохранять эту задержку. Именно в таких случаях energize.js приходит на помощь!
29. TipTap
Библиотека TipTap представляет собой js-библиотеку, которая облегчает возможность определения и управления комплексных жестов прикосновениями и курсором мыши на элементах HTML DOM (на SVG и Canvas также, правда, еще не было произведено тестирование), а также предлагает вам унифицированных способ управления различными системами ввода в устройствах: мышь, сенсоры, а также из специфической структуры данных (iOS, Android, Windows…) и так далее. На самом деле, эта библиотека направлена на мультитач-интерактивность, а не на устаревшую систему управления мышью. Но она, конечно же, поддерживает мышь.
30. DoubleTap для jQuery
31. Touche
Управление событиями мыши и прикосновений для тестирования сенсорных интерфейсов на настольных браузерах. Это означает, что touchstart, touchmove и touchend имитируются mousedown, mousemove и mouseend. Очень рекомендуем вам для тестирования.
32. jQuery.event.swipe
33. jQuery.event.move
34. toe.js
toe.js представляет собой миниатюрную библиотеку, основанную на jQuery, которая позволяет реализовать продуманную поддержку жестов на сенсорных устройствах.
35. Jester: простой способ распознания жестов на javascript
36. WKTouch
javascript-плагин для сенсорных устройств, позволяющий мультитач перетаскивание, масштабирование и поворачивание HTML-элементов.
37. SwipeSlide: Zepto-плагин для создания навигации с пролистыванием в стиле iOS
38. Interact
Interact – это оболочка для событий управления мышью и прикосновений. Она нужна для организации процесса написания приложений/демо, которые обрабатывают touch-события, а также для упрощения написания.
39. Lightning Touch
Lightning Touch делает ссылки адаптивными без типичной задержки в несколько сотен миллисекунд.
40. jsTouchLayer
JS Touch Layer – это js-среда разработки, которая абстрагируется от понятия жеста. Она сама будет решать, когда нажатие – это нажатие, а пролистывание – это пролистывание. Среда разработки позволит вам привязывать функции к этим событиям и не заботиться о технической стороне.
41. Antiscroll
42. Touch-события и абстракции
43. Interaction
Данный инструмент – это основа создания взаимодействия. Взаимодействия имеют общую модель событий из 3 частей: start -> move(s) -> stop. Такая база взаимодействия служит в роли абстрактного слоя для событий любого устройства ввода, которое позволяет перемещение посредством такой модели событий. Например, drag-and-drop (для мыши), swipe/slide (touch-события) и так далее.
Здесь есть встроенная поддержка для событий мыши и прикосновений как для настольных, так и для мобильных браузеров. Здесь также имеется механизм расширения (под названием hooks), а значит основа может быть расширена для поддержки ввода с любого устройства, способного запустить start, множественные перемещения и stop. Это позволит вам организовать одинаковую поддержку для любого взаимодействия, которое основано на базе такой системы, что означает, что каждое из этих взаимодействий не потребует отдельных знаний каждого устройства и отдельного API.
