2 augusti, 2019 admin

jquery swipe 예제

팁: 좌우 방향으로 스와이프할 수 있습니다. 제스처가 의도적으로 스 와이프되었는지 확인하기 위해 최소 거리 임계값이 추가되었으며 기본값은 75px입니다. 사용자가 이보다 적게 이동하면 [방향] 처리기가 트리거되지 않습니다. 스 와이프 라이트 이벤트는 사용자가 30px 이상 오른쪽 방향으로 요소를 드래그 할 때 트리거됩니다 : 편의를 위해 우리는 특정 방향으로 트리거되는 핸들러를 추가했습니다 : 스 와이프 왼쪽, 스 와이프 라이트, 스 와이프 업, 스 와이프 다운, 각각이 전달됩니다. 다음 인수; 이벤트, 방향, 거리, 지속 시간, 손가락 Count. 또한 손가락 속성과 함께 1,2,3 또는 ”all” 손가락 조합에서만 스 와이프를 트리거하도록 제한할 수 있습니다. 0 손가락은 비 터치 장치 (바탕 화면)에서 실행하는 경우보고됩니다. 가장 기본적인 플러그인은 DIV에 스 와이프 감지를 추가합니다. 스 와이프 처리기를 사용하여 사용자가 스 와이프 한 방향을 감지 할 수 있습니다.

다음 예제는 다음과 같은 예: 탭 이벤트가

요소에 발생 하는 경우; 현재

요소를 숨기기: 스 와이프 이벤트 도 확장 하 고 자신의 논리 또는 기능을 추가 할 수 있습니다. 다음 방법을 확장할 수 있습니다: 이 HTML 파일을 http://localhost/jqm_touch_swipe_event.html 다음 출력이 표시됩니다. 보다 복잡한 UI 상호 작용을 활성화하려면 swipeStatus 처리기를 사용하여 스와이프의 모든 단계에 대한 이벤트를 받을 수도 있습니다. TouchSwipe 플러그인은 원래 르노에 대한 아이 패드 특정 웹 사이트를 위해 작성되었습니다. 주요 기능은 사용자가 모델을 변경하기 위해 위 / 아래로 스 와이프 할 수있는 자동차 갤러리, 왼쪽 / 오른쪽으로 자동차의 특정 보기를 변경하는 것이었습니다. 당시 (2010) jQuery 모바일은 초기 단계에 매우 있었기 때문에 jQuery에 터치 이벤트를 가져 오기 위해 자체 플러그인을 작성하기로 결정했습니다. 스 와이프 이벤트는 사용자가 아래로 누르고 30px (및 75px 미만)에 의해 요소 위로 수평으로 스 와이프 할 때 트리거됩니다. 이 메서드는 시작 및 중지 개체를 다시 시작하고 스 와이프 이벤트에 대한 논리를 처리하고 트리거합니다. 이벤트 개체 event.target 속성을 사용하여 스 와이프 이벤트를 트리거한 DOM 요소를 반환합니다. 이 간단한 예제에서는 스와이프 상태를 사용하여 사용자가 이동하는 시기를 감지하지만 아직 스와이프 임계값에 도달하지 않았습니다. 임계값이 충족될 때까지 이미지가 드래그된 다음 다음 이미지로 스크롤됩니다. 스 와이프가 완료되지 않으면 이미지가 시작된 곳으로 다시 스냅됩니다.

위의 HTML 코드를 jqm_touch_swipe_event.html 파일로 서버 루트 폴더에 저장합니다. 나는 마침내이 것을 발견 할 때까지 많은 모바일 스 와이프 감지 스크립트를 읽고 테스트해야했습니다. 터치 스 와이프라고합니다 – 터치 장치에 대한 jQuery 플러그인. . 나는 어떤 이유로 rampinteractive.co.uk 웹 사이트가 다운 될 경우 여기에 코드를 포함하고 있습니다. 테스트한 결과 작동 중입니다: 이 메서드는 터치 스타트 이벤트를 받고 시작 위치에 대한 데이터 개체를 반환합니다. TouchSwipe는 iPad, iPhone 등과 같은 터치 입력 장치에서 jQuery와 함께 사용할 jQuery 플러그인입니다. 터치 이벤트는 사용자가 화면(페이지)을 터치할 때 트리거됩니다. 콘텐츠를 구성하고 진입점에 선택적 작업을 제공하는 데 사용합니다.

. 소스, 설명서, 자세한 데모 또는 기여는 다음을 참조하십시오. 효과적인 레이아웃을 만들기 위한 유용한 기능으로 배송: 사용자가 페이지의 ID를 사용하여 요소 위로 30px 이상을 가로로 드래그하여 이벤트를 지정하고 on() 메서드가 이벤트 처리기를 연결하면 발생합니다. 위의 코드가 어떻게 작동하는지 확인하기 위해 다음 단계를 수행하자 – 사용자가 요소를 누를 때 탭 이벤트가 트리거됩니다. . 옵션에 대해 자세히 알아보고 연결된 페이지에서 데모를 사용해 보십시오.