The super gestures plugin records gestures made by the user's mouse. This is great for touch interface web applications and unlike other gesture recording scripts it actually works in all major browsers including IE6.
Simple Gestures
An example of a simple gesture would be to click on the page and then drag your cursor to the left and then release the mouse. This is the jQuery required to record that gesture on the entire page:
$(function(){
$('*').gestures({
callback:function(gesture)
{
if(gesture.string == 'left')
{
alert('Left!');
}
}
});
});
Advanced Gestures
A more complicated gesture would move in more than one direction, for this example we are going to do something when the user gestures down, then right.
$(function(){
$('*').gestures({
callback:function(gesture)
{
if(gesture.string == 'down,right')
{
alert('Down Right!');
}
}
});
});
You can record any gesture combinations that you can dream up. For example you could record up, left, right, and then down by checking to see if gesture.string equals 'up,left,right,down' in the callback (in place of 'down,right').
Super Gestures
In addition to being able to record normal gestures like the ones above, you can also use what I like to call Super Gestures. These include zig-zags and circles.
$(function(){
$('*').gestures({
callback:function(gesture)
{
if(gesture.string == 'circle')
{
alert('Circled!');
}
else if(gesture.string == 'zig-zag')
{
alert('Zig-Zagged!');
}
}
});
});
In addition to the circle and zig-zag gestures you also have the more specific zig-zag-vertical, zig-zag-horizontal, circle-clockwise, and circle-counter-clockwise variations.
$(function(){
$('*').gestures({
callback:function(gesture)
{
if(gesture.string == 'circle-clockwise')
{
alert('Circled Clockwise!');
}
else if(gesture.string == 'zig-zag-vertical')
{
alert('Zig-Zagged Vertically!');
}
}
});
});
Notice that super gestures fire the callback function right away while you are making the gesture even before you release the mouse.
Instant Gestures
By changing one setting you can force the callback function to fire the moment a gesture is made, just like how the super gestures work.
$(function(){
$('*').gestures({
// This causes gestures to be registered instantly
instant:true,
callback:function(gesture)
{
if(gesture.string == 'left')
{
alert('Left!');
}
}
});
});
Gesture Magnitude
You can access the magnitude of a gesture easily. This is great for measuring the intensity or speed of which a gesture is made.
$(function(){
$('*').gestures({
callback:function(gesture)
{
alert("Gesture: "+gesture.string+"nMagnitude "+gesture.magnitude);
}
});
});
Gesture Chain Data
In addition to gesture.string and gesture.magnitude the jQuery Super Gestures Plugin also returns an array of object containing direction and magnitude of every part of that gesture.
If you are feeling adventurous then you can use the information in gesture.chain to achieve a higher level of control over your gestures. This simple example gives you the information about the first part of a gesture given.
$(function(){
$('*').gestures({
callback:function(gesture)
{
alert("First Part Of Gesturen"+
"-Direction: "+gesture.chain[0].direction+"n"+
"-Magnitude: "+gesture.chain[0].magnitude);
}
});
});
If you needed information about the second part of a gesture then you would access gesture.chain[1], for the third part gesture.chain[2], and so on.
What Now?
Go out and develop great interactive interfaces, but don't go overboard! I see this as a great way to make iPhone like applications with web technology. I haven't had the opportunity to test this on any touch interfaces so if you get a chance do me a favor and try it out and let me know how it works!
Really like this a lot? Then do me a favor and DZone it!
Comment
See what others have to say on this topic, or add your own two cents.