Monday, December 22nd, 2008
jQuery Gestures
Category: JavaScript, jQuery
, Library
Adrien Friggeri has taken the music player ui and spent some time to create a really nice gestures library that allows you to add mouse gestures to a web page, supports complex (i.e. sequences of) gestures and provides visual feedback through the use of a canvas element.
Example code looks like this:
JAVASCRIPT:
-
-
// initialize the engine, inactive by default and set the trace color to red
-
$.gestures.init({active:false,color:'#ff0000'});
-
-
// adds a new gesture : Down
-
$.gestures.register('D', function() {
-
alert('down !');
-
});
-
-
// a more complex gesture : Down, Left, Up, Right
-
$.gestures.register('DLUR', function() {
-
alert('this is a rectangle, no ?');
-
});
-
-
// you can log unknown gestures :
-
$.gestures.error(function(gesture) {
-
alert("oops, I don't understand what ""+gesture+"" means");
-
});
-
-
// useful keyboard tricks :
-
$(window).keydown(function(e) {
-
if ($.gestures.active() && e.which==27) {
-
// disable capture when user presses ESC
-
$.gestures.disable();
-
} else if (!$.gestures.active() && e.which==17) {
-
// enable capture when CTRL is pressed
-
$.gestures.enable();
-
}
-
});
-
$(window).keyup(function(e) {
-
// disable capture when CTRL is not pressed
-
if ($.gestures.active() && e.which==17) {
-
$.gestures.disable();
-
}
-
});
-
Related Content:
4 rating from 34 votes
No links?
http://random.friggeri.net/jquery-gestures/
lol!
This is a general comment: Please, Please, add links to the original article, site, blog or product. Even if you just mention someone/something, a link would be nice.
Please always add a link to the article. Some of these things are useful.
Not sure when I would use it, but its pretty damn cool. Also – a really good use of canvas.
Actually, the original blog article is here :
http://friggeri.net/blog/2008/12/21/jquery-gestures
To all concerned about the link not being included, it was an oversight. Posts on Ajaxian typically include many links but sometimes it slips through the cracks.
I’m not a fan of gestures per-se, but I know a lot of people that would love it, so I’ve given this a 5.
I turned on gestures in GMail (labs) and rarely use them. My hand always tracks to the buttons/links out of habit before I realize I could have just swiped right or left. For something like a photo gallery, where there is quick scrolling or browsing, this could be very useful.