jquery.gesture.js

Demo page

Usage

jquery.gesture.js requires jquery.touch.js on the same page.

Use the following code to initalize gesture on a jQuery object.

$("#touch-target").gestureInit();

Options

Options can be passed via an optional argument.

$("#touch-target").gestureInit({
    prefix: "",
    gesture_prefix: ""
});

Name	Type	Default	Description
prefix	string	'_gesture_'	Add prefix to touchInit(). If you are going to call gestureInit() multiple time on the same jQuery object, use different prefix for each call.
gesture_prefix	string	''	Add prefix to the triggering gesture event name. It is useful when you want to add handlers with different options. If you pass my_ as prefix, the event name gesture_start will become my_gesture_start. The same applies to gesture_move and gesture_end.

---

Events

Three kinds of unified gesture events will be triggered in response to unified touch events with two simultaneous points. Use the following code to handle these events

$("#touch-target").on("gesture_start", function(event) {
	// your handler function
});

The event name can be modified using the gesture_prefix option. There is the description of all the events.

Default name	Description
gesture_start	Triggered when a gesture starts on the target jQuery object.
gesture_move	Triggered when the gesture moves. The event will still trigger even if the touch points move out of the target jQuery object.
gesture_end	Triggered when the gesture ends or is cancelled.

---

The event object

An event object will be passed into your handler function. Here is a table of the properties of the event object that is important for handling the event.

Property name	Type	Description
type	string	It is the type of the current event.
clientX clientY pageX pageY screenX screenY	number	These are the coordinates of the center of the two touch points.
scale	number	The relative scale. It will be 1 at gesture_start and changes as the gesture moves.
rotation	number	The relative rotation (in radians). It will be 0 at gesture_start and changes as the gesture moves.

---

Dispose

If you are finished with handling unified touch events with the jQuery object. Use the following code to dispose.

$("#touch-target").gestureDispose();

If you used a prefix in gestureInit(), you need to pass the same prefix in gestureDispose().

$("#touch-target").gestureDispose("prefix", "gesture_prefix");