Что такое жесты и какие они бывают:
- Swipe — пролистывание как слайд, обычно используется для открытия меню жестом, провести пальцем по экрану слева на право чтобы открылось меню.
- hold — событие долгому длинному нажатию
Для того чтобы отследить жесты как на мобильном устройстве iPhone или Android или любой другой mobile, проще всего подключить библиотеку jquery.touchSwipe.min.js. Дальше привязываем событие к нужному нам элементу:
Теперь мы можем дополнять наш сайт жестами.
Если нам нужно чтобы событие жест сработал в реальном времени или через определенное количество пикселей пишем такую функцию:
Параметры:
event — стандартный ивент, тут можно посмотреть по какому элементу сработал скрипт
phase
- start — указывает начальную фазу события касания
- move — указывает на событие перемещения
- end — указывает на завершение события
- cancel — указывает на отмену события
direction
- left — указывает на передвижение влево
- right — указывает на передвижение вправо
- up — указывает на передвижение вверх
- down — указывает на передвижение вниз
- in — указывает на событие помещения в обьект
- out — указывает на событие выхода из обьекта
distance — расстояние которое пользователь пролистал
duration — продолжительность пролистывания в миллисекундах
fingerCount — количество пальцев при таче
fingerData — координаты пальцев при событии тач
currentDirection — текущее направление движения тача
Видео: TouchSwipe jQuery Plugin
Многие современные разработки не обходятся без ориентации под мобильные/планшеты. Почему бы Вам уже сейчас не начать использовать события swipe для того, чтобы дать мобильным и планшетным пользователям Вашего сайта больше возможностей и создать более комфортные условия для нахождения на сайте?
Простой jQuery плагин под названием TouchSwipe позволит получать события swipe (передвижение пальцами по экрану). Swipe действие делают пользователи, например, во время просмотра фотографий. Это самый удачный пример для понимания, который можно привести. Но оказывается, что это действие очень удобно не только для просмотра фотографий, но и уже сегодня используется на многих сайтах, например, для того же просмотра фото или вызова меню. Кроме того, это позволит использовать свайп-действия мыши (захват и перетаскивание) для пользователей ПК, MAC.
Для того, чтобы начать использовать данную библиотеку, необходимо подключить jQuery и саму библиотеку. Если на странице уже есть подключенный jQuery, то делать повторно это не нужно:
После чего на странице можно использовать следующий jQuery код:
Т.е. весь код сводится к следующему:
В демонстрационных материалах можно найти много интересного. А именно:
- можно узнавать сколькими пальцами происходит событие,
- в какую сторону прошел swipe,
- получать обработчики событий конца swipe
Возможные варианты событий:
Узнать сколько раз произошло событие можно с помощью данного кода:
Узнать количество пальцев:
Пример использования двух и трех пальцев для осуществления события
Обрабатываем события swipe и получаем данные о времени, количестве задействованных пальцев, расстоянию от нажатия, направлении и другие данные:
Кроме того, в примерах и документации Вы сможете найти дополнительные возможности, например, использование zoom — увеличения и уменьшения пальцами и другие.
A jQuery plugin to be used on touch devices such as iPad, iPhone, Android etc.
Detects single and multiple finger swipes, pinches and falls back to mouse ‘drags’ on the desktop.
Time and distance thresholds can be set to distinguish between swipe gesture and slow drag.
Allows exclusion of child elements (interactive elements) as well allowing page scrolling or page zooming depending on configuration.
- Detects swipes in 4 directions, «up», «down», «left» and «right»
- Detects pinches «in» and «out»
- Supports single finger or double finger touch events
- Supports click events both on the touchSwipe object and its child objects
- Definable threshold / maxTimeThreshold to determin when a gesture is actually a swipe
- Events triggered for swipe «start»,»move»,»end» and «cancel»
- End event can be triggered either on touch release, or as soon as threshold is met
- Allows swiping and page scrolling
- Disables user input elements (Button, form, text etc) from triggering swipes
Источник: