Pinterest Stumbleupon Whatsapp
Ads by Google

Currently, the JQuery UI (user interface) doesn’t support the use of touch events in their widgets and interactions. It supports only mouse events, which means that it responds only to mouse events like mouseover, mousemove, etc., and doesn’t respond to touch events like touchstart, touchmove and touchend that power today’s touch-based devices like the iPhone or iPad.

jQuery UI Touch Punch is a small hack that fixes this shortcoming and enables the use of touch events on sites that use the jQuery UI user interface. To enable it on your website simply include the script on your pages and your touch events will be turned into their corresponding mouse events.

To enable touch events in your jQuery UI app follow these steps:

  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 beforeits first use. 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. Use jQuery UI as expected and watch it work at the touch of a finger.
    <script>$('#widget').draggable();</script>

jquery touch event support

To get a clear idea how this works, see examples on their website.

Features:

Ads by Google
  • Enable jQuery UI events on a touch-enabled devices like iPad, iPhone and Android devices.
  • To enable on your website, simply include the script on your pages.
  • Small hack, code less than 1 KB.
  • Download the code from the site.

Check out jQuery UI Touch Punch @ http://touchpunch.furf.com

Leave a Reply

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