동적 반응형 웹사이트를 만들 때 개발자는 핀치, 탭, 스와이프 등의 모바일 제스처를 처리해야 합니다. 이러한 제스처는 '와 같은 모바일 개발 언어로 처리됩니다. 실룩 거리다 ' 또는 ' 네이티브 반응 ” 그리고 자바스크립트. 다른 웹 프로그래밍에서는 이런 종류의 이벤트를 처리하지 않습니다. 운 좋게! 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 >
< 단추 ID = '티' > 수도꼭지 단추 >
< 단추 ID = 'dt' > 두 번 탭하세요. 단추 >
< 피 ID = '표적' > DoubleTap 및 Tap 터치 이벤트 예제. 피 >
< 스크립트 >
$ ( '#티' ) .수도꼭지 ( 기능 ( ) {
$ ( '#표적' ) .숨다 ( ) ;
} )
$ ( '#dt' ) .더블탭 ( 기능 ( ) {
$ ( '#표적' ) .보여주다 ( ) ;
} )
스크립트 >
몸 >
HTML >
위 코드에 대한 설명은 다음과 같습니다.
-
- 먼저 CDN “ 콘텐츠 전달 네트워크 ” jQuery 및 터치 이벤트의 경우 “ <머리> ” 태그를 지정하여 액세스할 수 있도록 합니다. CDN은 공식 사이트에서 찾을 수 있습니다. jQuery 및 cdnjs 방문을 통해 각기.
- 다음으로, ID가 ''인 두 개의 버튼 요소가 생성됩니다. 티 ' 그리고 ' dt '. 또한 “ 피 ' ID가 '인 요소 표적 '. 터치 이벤트에 의한 작업은 이 요소에서 수행됩니다.
- “ 안에 <스크립트> ” 태그에서 ID가 “인 요소를 선택합니다. 티 ”를 선택하고 “를 첨부합니다. 수도꼭지 ” 터치 이벤트를 터치하세요. 이 이벤트는 ID가 ''인 다른 HTML 요소를 선택합니다. 표적 '를 적용하고 ' 숨다() ” 그것에 대한 방법.
- 또한, “ dt ' 요소를 추가하고 '를 적용합니다. 두 번 탭 ” 터치 이벤트를 적용하고 같은 방식으로 “ 보여주다() '에 대한 '방법 표적 ” id 요소입니다.
코드 컴파일 후 생성된 출력은 다음과 같습니다.
위 출력은 '탭' 및 '두 번 탭' 터치 이벤트에서 작업이 수행되었음을 보여줍니다.
예 2: Swipe 및 Swipeend 터치 이벤트 사용
이 예에서는 ' 강타 ' 그리고 ' 휘핑 오리 ” 터치 이벤트가 시연될 예정입니다.
< 스크립트 >$ ( '#티' ) .강타 ( 기능 ( ) {
$ ( '#표적' ) .숨다 ( ) ;
} )
$ ( '#티' ) .스위핑 오리 ( 기능 ( ) {
$ ( '#표적' ) .숨다 ( ) ;
} )
스크립트 >
위의 jQuery 코드에 대한 설명은 다음과 같습니다.
-
- 먼저, 선택된 요소는 ID '를 통해 선택됩니다. 티 ' 그리고 ' 강타 ” 이벤트가 첨부되어 있습니다. 이 이벤트는 함수를 실행하고 실행된 함수는 ID '를 통해 대상 요소를 선택합니다. 표적 '를 적용하고 ' 숨다() ” 메소드를 사용하여 콘텐츠를 보이지 않게 만듭니다.
- 다음으로는 “ 휘핑 오리 ” 이벤트는 동일한 요소에 적용되며 해당 기능은 “ 보여주다() ” ID가 “인 선택된 요소에 대한 메소드 표적 ” 스와이프 이벤트가 종료되면 콘텐츠가 표시되도록 합니다.
위 코드의 출력은 다음과 같이 생성됩니다.
출력에는 스와이프 시 대상 요소 콘텐츠가 숨겨지고 스와이프 이벤트가 종료되면 표시되는 것으로 표시됩니다.
예제 3: 스크롤 시작 및 스크롤 종료 터치 이벤트 사용
이 경우 “ 스크롤 시작 ' 그리고 ' 스크롤엔드 ” 터치 이벤트가 구현될 예정입니다:
< 스크립트 >$ ( '#티' ) .scrollstart ( 기능 ( ) {
$ ( '#표적' ) .숨다 ( ) ;
} )
$ ( '#티' ) .scrollend ( 기능 ( ) {
$ ( '#표적' ) .보여주다 ( ) ;
} )
스크립트 >
위 코드에 대한 설명은 다음과 같습니다.
-
- 이 예에서 유일한 변경 사항은 ' 스크롤 시작 ' 그리고 ' 스크롤엔드 ” 수행할 이벤트 “ 숨다() ' 그리고 ' 보여주다() ” 요소에 대한 메소드와 나머지 코드는 위의 예와 동일하게 유지됩니다.
- 대상 텍스트는 시작 시 또는 스크롤 중에 숨겨지고 스크롤이 끝나면 표시됩니다.
위 코드를 컴파일한 후 생성된 출력은 다음과 같습니다.
출력에는 스크롤할 때 요소 콘텐츠가 숨겨지고 스크롤이 끝나면 표시된다는 것이 표시됩니다.
이 블로그에서는 모바일 장치용 jQuery 터치 이벤트 플러그인에 대해 설명했습니다.
결론
jQuery는 “ 터치 이벤트 ' 모바일용 플러그인을 사용하면 jQuery가 스와이프, 탭, 방향 변경 등과 같은 터치 모바일에서 발생하는 이벤트를 특별히 처리하는 이벤트를 추가할 수 있습니다. 이 플러그인에서 제공하는 이벤트는 기존의 ' 클릭하면 ” 또는 기타 이벤트. 이 플러그인을 사용하면 개발자는 모바일과의 사용자 상호 작용에 따라 특정 기능을 쉽게 적용할 수 있습니다. 이번 블로그에서는 모바일용 jQuery 터치 이벤트 플러깅에 대해 설명했습니다.