Need help with jquery-ui-touch-punch?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

furf
3.4K Stars 1.3K Forks 33 Commits 238 Opened issues

Description

A duck punch for adding touch events to jQuery UI

Services available

!
?

Need anything else?

Contributors list

# 457,768
20 commits
# 8,956
Java
alipay
omnipay
Ruby
1 commit

jQuery UI Touch Punch

Touch Event Support for jQuery UI

jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.

Visit the official Touch Punch website.

Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser will fail on most, if not all, touch-enabled mobile devices, because jQuery UI listens to mouse events—mouseover, mousemove and mouseout—not touch events—touchstart, touchmove and touchend.

That's where jQuery UI Touch Punch comes in. Touch Punch works by using simulated events to map touch events to their mouse event analogs. Simply include the script on your page and your touch events will be turned into their corresponding mouse events to which jQuery UI will respond as expected.

As I said, Touch Punch is a hack. It duck punches some of jQuery UI's core functionality to handle the mapping of touch events. Touch Punch works with all basic implementations of jQuery UI's interactions and widgets. However, you may find more complex cases where Touch Punch fails. If so, scroll down to learn how you can file and/or fix issues.

This code is dual licensed under the MIT or GPL Version 2 licenses and is therefore free to use, modify and/or distribute, but if you include Touch Punch in other software packages or plugins, please include an attribution to the original software and a link to this Touch Punch website.

Using Touch Punch is as easy as 1, 2…

Just follow these simple steps to enable touch events in your jQuery UI app:

  1. Include jQuery and jQuery UI on your page.

    
    
  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.

    
    
  3. There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.

    
    

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.