touchMe - a jQuery plugin for iPad web apps

Introduction

You have touched an iPad. Flipping page after page to skim though a digital magazine, zooming images in and out, even rotate them if you like, pretty cool uh? If you are a web developer and you want to integrate these unique input features all iDevices offer into your applications but you don't have time to read the Object-C Bible, now with Safari mobile browser and its support to CSS3 you can bring them to your audiences by including touchMe jQuery plugin to your next project.

touchMe currently supports tapping, wipping in eight different directions (north, east, south, west, northeast, southeast, southwest and northwest) and multi-touch features including object zooming, scaling and rotation. Each feature can be individually turned on/off. Event handling functions are fully customizable.
Implementation

touchMe is nothing more than a jQuery extension. It requires jQuery 1.3+ to be loaded before the library is added to the web page. You can add the code below to load touchMe and jQuery or download a copy to host on your web site.


<script type="text/javascript" src="http://www.desmondliang.com/code/jquery.latest.js"></script>
<script type="text/javascript" src="http://library.upinc.ca/js/touchme/jquery.touchme.js"></script>


Once the scripts are loaded, you can associate touchMe to one or multiple DOM objects. Once this is done, the objects will react to input from the touch screen.


$(element).touchme();


in addition, this options are available


isDetectHorizontalMovement: enable/disable horizontal touch movement. options: true(default)/false
isDetectVecticalMovement: enable/disable vertical touch movement. options: true(default)/false
isDetectDiagonalMovement: enable/disable diagonal movement. options: true/false(default)


You can over wirte the following functions to handle input from the touch screen.


wipeLeft: function(event){} left wipe movement handler
wipeRight: function(event){} right wipe movement handler
wipeUp: function(event){} up wipe movement handler
wipeDown: function(event){} down wipe movement handler
wipeDownRight: function(event){} down right wipe movement handler
wipeUpLeft: function(event){} up left wipe movement handler
wipeUpRight: function(event){} up right wipe movement handler
wipeDownLeft: function(event){} down left wipe movement handler



gestureChange: function(event){} multi-touch input start handler, for scaling and rotation
onGestureEnd:function(event){}, multi-touch input completion handler, for scaling and rotation
inMotion:function(event){}, control element behavior during multi-touch motion, for scaling and rotation


Examples

To help you better understand how to use the code, here are some examples.

Wipping


var touchable=$("body").touchme({
isDetectHorizontalMovement:true,
isDetectVecticalMovement:true,
isDetectDiagonalMovement:true,
wipeRight: function(target) {
alert("right");
});
},
wipeLeft: function(target) {
alert("left");
},
wipeUp: function(target){
alert("up");
},
wipeDown: function(target){
alert("down");
},
wipeDownRight: function(target) {
alert("down+right");
},
wipeUpLeft: function(target) {
alert("up+left");
},
wipeUpRight: function(target){
alert("up+right");
},
wipeDownLeft: function(target){
alert("down+left");
}
});


Zooming/scaling


var scalable=$(".scalable").touchme({
gestureChange: function(e){
e.target.style.webkitTransform =
'scale(' + e.scale + ')';
}
});


Rotation


var rotation=$(".rotatable").touchme({
gestureChange: function(e){
e.target.style.webkitTransform =
'rotate(' + e.rotation+ 'deg)';
}
});


In fact you can combine scaling handler and rotation handler into one function. Essentially what happens is touchMe uses jQuery to modify the CSS style of the target element.


var rotation=$(".rotatable").touchme({
gestureChange: function(e){
e.target.style.webkitTransform =
'rotate(' + e.rotation+ 'deg) scale(' + e.scale + ')';
}
});


Click here to see a demo on your iPad.

If you spot any bug please let us know at info@desmondliang.com