jQuery touchSwipe 플러그인

모바일 쇼핑몰에서 사용할 swipe 플러그인을 찾아보니 jQuery touchSwipe라는 플러그인을 찾게 됐다. 다른 플러그인들에 비해서 용량은 좀 크지만 터치시 움직일 때마다 실시간으로 움직인 거리 등의 정보를 얻을 수 있는 점이 마음에 들어서 사용해보려 한다. 아직 테스트를 진행하고 있지만 괜찮은 플러그인인 것 같다.

기본적으로 위와같은 방법으로 사용할 수 있다. 이렇게 사용했을 때 기본적으로 #touch 엘리먼트의 자식 엘리먼트 중 input, a 등의 엘리먼트는 이벤트에서 제외되도록 설정되어 있다. 그래서 이벤트가 발생하지 않아 처음에 엄청 당황스러웠는데 excludedElements:”.noSwipe” 와 같이 제외되는 엘리먼트를 재설정 해주면 된다.

위 코드는 제외되는 엘리먼트 재설정과 세로 스크롤을 허용하는 부분이 추가되어 있다. 아래 첨부 파일은 1.6.5 버전의 압축 파일이다.

jquery.touchSwipe.zip

편리

PHP와 MariaDB, jQuery 등을 사용해 게시판, 쇼핑몰 솔루션을 개발합니다. 그누보드5와 영카트5 개발에 참여 했습니다. Linux와 Nginx는 물론 WordPress, Git 등에도 관심이 많습니다. 자전거 타기 및 사진 촬영을 취미로 하고 있습니다.

One thought to “jQuery touchSwipe 플러그인”

  1. 안녕하세요. 편리님.

    스크립트에 오류가 있어서 글 남깁니다.

    swipe: function(event, direction, distance, duration, fingerCount) {
    switch(direction) {
    case “left”:
    alert(“left”);
    break;
    case “right”:
    alert(“right”);
    break;
    },
    threshold: 0,
    excludedElements:”.noSwipe”,
    allowPageScroll:”vertical”
    }

    — >

    swipe: function(event, direction, distance, duration, fingerCount) {
    switch(direction) {
    case “left”:
    alert(“left”);
    break;
    case “right”:
    alert(“right”);
    break;
    }
    },
    threshold: 0,
    excludedElements:”.noSwipe”,
    allowPageScroll:”vertical”

    이렇게 되어야 할거같습니다.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.