jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.
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, becuase 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.
Download the Code
The jQuery UI Touch Punch plugin is available in two versions:
* minified & gzip'd
Like the Code? Make a Donation!
If you feel that jQuery UI Touch Punch has made your life (and the lives of your users) a little easier, please consider making a donation.
Your contributions allow me to spend time maintaining the code, writing documentation, creating examples and helping Touch Punch users debug their applications.
Using Touch Punch is as easy as 1, 2…
Just follow these simple steps to enable touch events in your jQuery UI app:
Include jQuery and jQuery UI on your page.
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
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.
There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.
Try Some Examples
Deal with Issues
Here are some ways you can contribute to the development and maintenance of jQuery UI Touch Punch:
If you experience errors using jQuery UI Touch Punch, log them on GitHub. Please provide specific details and, if possible, include a link to the broken implementation.
Before submitting an issue, please check to see that a similar issue has not been previously submitted. View open issues.
Log an issue
Even better, you can help by fixing errors and then submitting pull requests.
When submitting a pull request, please provide links to examples of the broken and fixed functionality.
View open issues
About the Author
jQuery UI Touch Punch is maintained by furf, aka David Furfero: UI engineer at
Time, Inc., MLB, Meebo, furf, improv comedian and all-around lovable asshole.