반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함


jQuery Mobile이 아니고 jQuery UI 에서 Touch 이벤트를 지원한다고 합니다. 


jQuery UI Touch Punch


Touch Event Support for jQuery UI


아이패드 (iPad), 아이폰 (iPhone), 안드로이드 (Android) 와 기타 touch-enabled 모바일 디바이스에서 테스트 됐음


jQuery UI Touch Punch는 jQuery UI 유저 인터페이스 라이브러리를 사용하는 site에서 touch event를 사용할 수 있도록 한 하찮은것입니다.


Visit the official Touch Punch website.


현재 jQuery UI 유저 인터페이스 라이브러리는 touch event를 사용하는 것을 지원하지 않고 있습니다. 그 의미는 데스크탑에서 그럴듯하게 잘 만들어서 테스트 된 것도 touch-enabled 모바일 디바이스에서는 별로 유용하지 않다는 것을 말합니다. 왜냐하면 jQuery UI 는 마우스 이벤트 (mouseover, mousemove and mouseout)를 listen 하고 있지 touch event(touchstart, touchmove and touchend)를 Listen 하고 있지 않기 때문입니다.


그래서 jQuery UI Touch Punch가 나온 겁니다.Touch Punch는 simulated events를 사용해서 mouse event를 touch event로 매핑합니다. 간단히 페이지에 script를 include 시키면 touch 이벤트가 각각의 상응하는 mouse 이벤트로 변환될 겁니다.


제가 말했듯이 Touch Punch는 하찮은 것입니다. 그냥 jQuery UI의 몇개의 core 기능을 touch event로 매핑하는  duck punches 일 뿐입니다. Touch Punch는 jQuery UI의 interaction과 widget 을 implement 해서 사용합니다. 그래도 사용하시려고 하면 잘 작동을 안하고 오류가 나고 할 겁니다. 이러한 이슈들을 어떻게 알아내고 어떻게 고칠지에 대해 아래 글을 통해서 미리 익혀 두세요.


이 코드는 MIT나 GPL 버전 두개의 licenced 돼 있습니다. 그렇기 때문에 Free 입니다. 수정하시고 배포하셔도 됩니다. 다만 이 Touch Punch를 패키지나 플러그인으로 사용하시면 Original software에서 밝혀 주시고 또  Touch Punch website에 링크도 걸어 주세요.



Using Touch Punch is as easy as 1, 2…


아래대로 하시면 jQuery UI 앱에서 touch 이벤트를 사용하실 수 있습니다.:

  1. Include jQuery and jQuery UI on your page.

    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
    
  2. Include Touch Punch after jQuery UI and before its first use.

    Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.

    <script src="jquery.ui.touch-punch.min.js"></script>
    
  3. There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.

    <script>$('#widget').draggable();</script>
    

Tested on iPad, iPhone, Android and other touch-enabled mobile devices.


Download the Code

jQuery UI Touch Punch plugin 은 아래 두개의 버전이 있습니다. 다운받아서 사용하세요.



반응형

Comment

이전 1 2 3 4 5 6 7 다음