How to use jQuery Mobile for its touch event support only (no UI enhancements)?

Question

I’m working on a web app that has its own look and feel. I want to use jQuery Mobile for the touch events support only.

When I link jquery.mobile.min.js (without li

Answer 1

If you want to use jQuery mobile for touch events only, add this piece of script before you load the jQuery mobile library:

<script type="text/javascript">$(document).bind("mobileinit", function(){$.extend(  $.mobile , {autoInitializePage: false})});</script>

This prevents jquery mobile from initializing the page and touching the DOM, thus leaving your layout alone.

Answer 2

Another new option is jQuery-Mobile-Events, I've been struggle with this problem and only find this plugin useful.

The custom build from jQuery Mobile's Download Builder doesn't work for me. And jGestures doesn't have the taphold event which I need.

Answer 3

jQuery Mobile now has a Download Builder that lets you select only the parts that you want, in this case, you only need to select the Touch checkbox under the Event section.

http://jquerymobile.com/download-builder/

Answer 4

In case anyone else runs into this (and doesn't need the file off one of jQuery's CDNs), here are the steps I took to extract just the JQM event triggers:

1. git clone git@github.com:jquery/jquery-mobile
2. cd jquery-mobile
3. edit js/jquery.mobile.js in your favorite editor
4. replace the define(...); statement with define(['./events/touch', './events/orientationchange']);
5. make
6. your events-only JQM is now in compiled/jquery.mobile.js and compiled/jquery.mobile.min.js

Now you can use $(el).tap(fn) and the like without worrying about JQM highjacking your markup!

Answer 5

taking care of this particular problem at init time is nearly impossible, your best bet is to use data-role="none" on the ui element that you do not want default styling to happen on as such:

<button type="button" data-role="none">Click Me!</button>​​​​​​​​​

check it out at http://jsfiddle.net/JGgrw/13/

Answer 6

If you just want to bind to touch/gesture events I'd use jGestures instead:

http://jgestures.codeplex.com/

Nice little jquery plugin that I've used on projects before with a big range of events to bind to:

Available events:

orientationchange The device is turned clockwise or counterclockwise. This event is triggered by the device and might use an internal gyroscope.

pinch Is triggered during a pinch gesture (two fingers moving away from or towards each other).

rotate Is triggered during a rotation gesture (two fingers rotating clockwise or counterclockwise).

swipemove Is triggered during a swipe move gesture (finger(s) being moved around the device, e.g. dragging)

swipeone Is triggered after a swipe move gesture with one touchpoint (one finger was moved around the device)

swipetwo Is triggered after a swipe move gesture with two touchpoints (two fingers were moved around the device)

swipethree Is triggered after a swipe move gesture with three touchpoints (three fingers were moved around the device)

swipefour Is triggered after a swipe move gesture with four touchpoints (four fingers were moved around the device)

swipeup Is triggered after an strict upwards swipe move gesture

swiperightup Is triggered after a rightwards and upwards swipe move gesture

swiperight Is triggered after a strict rightwards swipe move gesture

swiperightdown Is triggered after a rig*htwards and downwards swipe move gesture

swipedown Is triggered after a strict downwards swipe move gesture

swipeleftdown Is triggered after a leftwards and downwards swipe move gesture

swipeleft Is triggered after a strict leftwards swipe move gesture

swipeleftup Is triggered after a leftwards and upwards swipe move gesture

tapone Is triggered after a single (one finger) tap gesture

taptwo Is triggered after a double (two finger) tap gesture

tapthree Is triggered after a tripple (three finger) tap gesture

pinchopen Is triggered when a pinchopen gesture (two fingers moving away from each other) occured and the touchpoints (fingers) are removed the device.

pinchclose Is triggered when a pinchclose gesture (two fingers moving towards each other) occured and the touchpoints (fingers) are removed the device.

rotatecw Is triggered when a clockwise rotation gesture (two fingers rotating clockwise) occured and the touchpoints (fingers) are removed the device.

rotateccw Is triggered when a counterclockwise rotation gesture (two fingers rotating counterclockwise) occured and the touchpoints (fingers) are removed the device.