How to use jQuery Mobile for its touch event support only (no UI enhancements)?
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 linking the css), then the layout of my page is broken.
How can I configure (initialize) jQuery Mobile to only use touch events support? Would I bind the events in the jQuery document ready hook since I'd not have any JQM page related event?
Edit
See this example in jsfiddle: http://jsfiddle.net/redhotsly/JGgrw/. The html contains a <button> but jQuery Mobile created a <span> to its left. If you inspect the resulting markup (F12) you will see that jQuery Mobile also added a CSS class to my button.
Edit:
I need a solution where I'll not have modify the JQM script. I need to use the official script off a CDN.
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, eg 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.
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.
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/
链接地址: http://www.djcxy.com/p/72086.html