jquery swipe 예제

스 와이프 이벤트는 사용자가 아래로 누르고 30px (및 75px 미만)에 의해 요소 위로 수평으로 스 와이프 할 때 트리거됩니다. 편의를 위해 특정 방향으로만 트리거되는 처리기를 추가했습니다: 스 와이프왼쪽, 스 와이프라이트, 스 와이프업, 스 와이프 다운, 각각은 다음 인수를 전달합니다. 이벤트, 방향, 거리, 지속 시간, 손가락 Count. 스 와이프 이벤트는 사용자 고유의 논리 또는 기능을 추가하기 위해 확장 할 수도 있습니다. 다음 방법을 확장할 수 있습니다: 이 간단한 예제에서는 스와이프 상태를 사용하여 사용자가 움직일 때를 감지하지만 아직 스와이프 임계값에 도달하지 않았습니다. 임계값이 충족될 때까지 이미지가 드래그된 다음 다음 이미지로 스크롤됩니다. 스 와이프가 완료되지 않으면 이미지가 시작된 곳으로 다시 스냅됩니다. 이 HTML 파일을 http://localhost/jqm_touch_swipe_event.html 다음 출력이 표시됩니다. 이 메서드는 시작 및 중지 개체를 다시 시작하고 스 와이프 이벤트에 대한 논리를 처리하고 트리거합니다.

보다 복잡한 UI 상호 작용을 활성화하려면 swipeStatus 처리기를 사용하여 스와이프의 모든 단계에 대한 이벤트를 받을 수도 있습니다. 이벤트 개체 event.target 속성을 사용하여 스 와이프 이벤트를 트리거한 DOM 요소를 반환합니다. 나는 마침내이 것을 발견 할 때까지 많은 모바일 스 와이프 감지 스크립트를 읽고 테스트해야했습니다. 터치 스 와이프라고합니다 – 터치 장치에 대한 jQuery 플러그인. TouchSwipe 플러그인은 원래 르노에 대한 아이 패드 특정 웹 사이트를 위해 작성되었습니다. 주요 기능은 사용자가 모델을 변경하기 위해 위 / 아래로 스 와이프 할 수있는 자동차 갤러리, 왼쪽 / 오른쪽으로 자동차의 특정 보기를 변경하는 것이었습니다. 당시 (2010) jQuery 모바일은 초기 단계에 매우 있었기 때문에 jQuery에 터치 이벤트를 가져 오기 위해 자체 플러그인을 작성하기로 결정했습니다. 가장 기본적인 플러그인은 DIV에 스 와이프 감지를 추가합니다. 스 와이프 처리기를 사용하여 사용자가 스 와이프 한 방향을 감지 할 수 있습니다. 스 와이프 라이트 이벤트는 사용자가 30px 이상 오른쪽 방향으로 요소를 드래그 할 때 트리거됩니다 : 다음 예제는 말한다 : 탭 이벤트가

요소에 발생 할 때; 현재

요소를 숨길 : 팁 : 당신은 오른쪽과 왼쪽 방향으로 모두 스 와이프 할 수 있습니다.

제스처가 의도적으로 스 와이프되었는지 확인하기 위해 최소 거리 임계값이 추가되었으며 기본값은 75px입니다. 사용자가 이보다 적게 이동하면 [방향] 처리기가 트리거되지 않습니다.