jQuery UI Touch Punch - jQuery UI 에서 Touch 를 지원합니다.-

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 은 아래 두개의 버전이 있습니다. 다운받아서 사용하세요.

• Production, 584 bytes*
• Development, 4.5 KB