При создании динамически реагирующих веб-сайтов разработчику необходимо обрабатывать мобильные жесты, а также сжимание, касание и пролистывание. Эти жесты обрабатываются языками мобильной разработки, такими как « порхать ' или ' реагировать родной » и JavaScript. Другое веб-программирование не обрабатывает события такого рода. К счастью! С помощью jQuery « сенсорное событие », эти события или жесты также могут обрабатываться.
В этом блоге будет проиллюстрирован процесс использования плагина событий касания jQuery для мобильных устройств.
Как использовать плагин jQuery Touch Events для мобильных устройств?
jQuery абстрагирует различия между событиями касания и мобильными событиями, чтобы использовать согласованные API или плагины, такие как « сенсорное событие ». Этот плагин предоставляет несколько событий, которые указаны ниже в табличной форме:
| утка для битья | Вызывает определенную функцию в конце пролистывания элемента. |
| начало прокрутки | Вызывает определенную функцию в начале прокрутки выбранного элемента. |
| прокрутка | Вызывает определенную функцию в конце прокрутки элемента. |
| изменение ориентации | Запускает функцию, когда ориентация устройства или мобильного телефона изменяется, например, при перемещении в портретной ориентации из альбомной ориентации. |
Синтаксис
Синтаксис событий касания jQuery указан ниже:
$ ( 'этот' ) .touchEvent ( функция ( ) {
// ваш код
} )
В приведенном выше синтаксисе:
-
- « этот ” — это селектор, который представляет собой действие в качестве вызывающего действия или выбранного элемента.
- « сенсорное событие ” — это конкретное имя используемого события, оно может быть событием из приведенной выше таблицы.
- « функция() » — это пользовательская функция, которая будет выполняться предоставленным событием касания.
Теперь давайте рассмотрим пару примеров, чтобы лучше понять события касания.
Пример 1. Использование Tap и DoubleTap.
В этом примере « сенсорное событие ' событие ' кран ' и ' двойное нажатие ” будет использоваться для вызова или выполнения какой-либо функции над выбранным элементом:
< HTML >< голова >
< источник сценария = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' >/ сценарий >
< сценарий источник '=' 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
сценарий >
голова >
< тело >
< h3 стиль '=' 'цвет: кадетский синий;' > Линукс h3 >
< кнопка идентификатор '=' 'т' > Кран кнопка >
< кнопка идентификатор '=' 'дт' > Двойное нажатие кнопка >
< п идентификатор '=' 'цель' > Пример событий DoubleTap и Tap Touch. п >
< сценарий >
$ ( '#т' ) .кран ( функция ( ) {
$ ( '#цель' ) .скрывать ( ) ;
} )
$ ( '#дт' ) .двойное нажатие ( функция ( ) {
$ ( '#цель' ) .показывать ( ) ;
} )
сценарий >
тело >
HTML >
Объяснение приведенного выше кода:
-
- Во-первых, CDN» Сеть доставки контента ” для событий jQuery и касания будет вставлен внутри “ <голова> », чтобы сделать их доступными. CDN можно найти на официальном сайте. jQuery и посетив cdnjs соответственно.
- Затем создаются два элемента кнопки с идентификатором « т ' и ' DT ». Также создайте « п ” элемент с идентификатором “ цель ». Действие по событию касания будет выполняться над этим элементом.
- Внутри ' <скрипт> », выберите элемент с идентификатором « т » и прикрепите « кран коснитесь события с ним. Это событие выбирает другой элемент HTML с идентификатором « цель » и применяет « скрывать() » метод на нем.
- Кроме того, выберите « DT элемент ” и примените элемент “ двойное нажатие коснитесь события и таким же образом примените « показывать() ” метод на “ цель » элемент идентификатора.
Вывод, сгенерированный после компиляции кода, показан ниже:
Приведенный выше вывод показывает, что действия были выполнены при событиях касания «касание» и «двойное касание».
Пример 2. Использование событий Swipe и Swipeend Touch
В этом примере реализация « проведите пальцем по экрану ' и ' утка для битья » будут продемонстрированы сенсорные события:
< сценарий >$ ( '#т' ) .проведите пальцем по экрану ( функция ( ) {
$ ( '#цель' ) .скрывать ( ) ;
} )
$ ( '#т' ) .смахивая утка ( функция ( ) {
$ ( '#цель' ) .скрывать ( ) ;
} )
сценарий >
Описание приведенного выше кода jQuery выглядит следующим образом:
-
- Сначала выбранный элемент выбирается по его идентификатору « т » и « проведите пальцем по экрану К нему прикреплено событие. Это событие запускает функцию, и запущенная функция выбирает целевой элемент по идентификатору « цель » и применяет « скрывать() ” на нем, чтобы сделать его содержимое невидимым.
- Далее « утка для битья событие применяется к тому же элементу, а его функция применяет « показывать() ” для выбранного элемента с идентификатором “ цель », чтобы сделать содержимое видимым после завершения события смахивания.
Вывод приведенного выше кода генерируется как:
Вывод показывает, что содержимое целевого элемента скрывается во время пролистывания и появляется, когда событие пролистывания завершается.
Пример 3. Использование событий Touch Start и Scrollend.
В этом случае « начало прокрутки ' и ' прокрутка » сенсорные события будут реализованы:
< сценарий >$ ( '#т' ) .scrollstart ( функция ( ) {
$ ( '#цель' ) .скрывать ( ) ;
} )
$ ( '#т' ) .scrollend ( функция ( ) {
$ ( '#цель' ) .показывать ( ) ;
} )
сценарий >
Объяснение приведенного выше кода указано так:
-
- Единственное изменение в этом примере — использование « начало прокрутки ' и ' прокрутка «мероприятия для проведения» скрывать() ' и ' показывать() ” над элементом, а остальная часть кода останется такой же, как в приведенном выше примере.
- Целевой текст скрывается в начале или во время прокрутки и становится видимым, когда прокрутка завершается.
Вывод, сгенерированный после компиляции приведенного выше кода, показан ниже:
Вывод показывает, что содержимое элемента скрыто во время прокрутки и становится видимым, когда прокрутка завершается.
В этом блоге описаны плагины событий касания jQuery для мобильных устройств.
Заключение
jQuery» сенсорное событие Плагин для мобильных устройств позволяет jQuery добавлять события, которые специально обрабатывают события, происходящие на сенсорных мобильных устройствах, такие как пролистывание, касание, изменение ориентации и т. д. События, предоставляемые этим плагином, реализуются так же, как традиционные « по щелчку или другие события. Используя этот плагин, разработчик может легко применять определенные функции в зависимости от взаимодействия пользователя с мобильным телефоном. В этом блоге объясняется подключение событий касания jQuery для мобильных устройств.