JavaScript UI Gesture recognizer for Mobile Safari

JsGestureRecognizer allows you to add gesture recognizers to the DOM objects for Mobile Safari like UIGestureRecognizer in iOS. Just like UIGestureRecognizer, two steps are required to enable gestures on a DOM element. First thing is to create an instance of a gesture recognizer, set its properties and initialize with a callback function and then attach the gesture to a DOM element.

To make it work, this JavaScript “plugin” requires jQuery or Prototype.JS to work and on a first basis, all you need to do is include the path to the JavaScript and it should work. Of course, you must create an instance of JsGestureRecognizer, set up the properties with a callback function (see example bellow).

// create new instance of JSTapGestureRecognizer
var tap = new JSTapGestureRecognizer();
// specify the number of taps required to recognize
tap.numberOfTapsRequired = 1;
// set up the callback function
// the callback function will pass the instance of the recognizer
// as its argument (ie sender)
tap.initWithCallback(function(sender) {
  if (sender.state == JSGestureRecognizerStateRecognized) {
    alert('tapped : ' + sender.taps + ' time(s)');
  }
});
// add gesture to a DOM element
JSGestureRecognizer.addGestureRecognizer(document.getElementById('foo'), tap);

In iOS, you specify a target and action for the gesture recognizer. With JSGestureRecognizer, we instead specify a callback function. The callback function is called anytime the JSGestureRecognizer dispatches an event, which strictly follows UIGestureRecognizer’s action messages.

JavaScript UI Gesture recognizer for Mobile Safari

UI Gesture JavaScript for mobile safari

Demos Download JsGestureRecognizer

Related Posts

20+ Mobile, Application and Web GUI Kits

2 UI bootstraps – Twitter & jQuery

UI framework for webapps on iPhone-class devices

WYSIWYG Visual Editor for UI Mockups

Leave a Reply