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

  1. // initialize the engine, inactive by default and set the trace color to red
  2. $.gestures.init({active:false,color:'#ff0000'});
  3.  
  4. // adds a new gesture : Down
  5. $.gestures.register('D', function() {
  6.   alert('down !');
  7.   });
  8.  
  9. // a more complex gesture : Down, Left, Up, Right
  10. $.gestures.register('DLUR', function() {
  11.   alert('this is a rectangle, no ?');
  12.   });
  13.  
  14. // you can log unknown gestures :
  15. $.gestures.error(function(gesture) {
  16.   alert("oops, I don't understand what \""+gesture+"\" means");
  17. });
  18.  
  19. // useful keyboard tricks :
  20. $(window).keydown(function(e) {
  21.   if ($.gestures.active() && e.which==27) {
  22.     // disable capture when user presses ESC
  23.     $.gestures.disable();
  24.   } else if (!$.gestures.active() && e.which==17) {
  25.     // enable capture when CTRL is pressed
  26.     $.gestures.enable();
  27.   }
  28. });
  29. $(window).keyup(function(e) {
  30.   // disable capture when CTRL is not pressed
  31.   if ($.gestures.active() && e.which==17) {
  32.   $.gestures.disable();
  33.   }
  34. });

Posted by Dion Almaer at 8:28 am
10 Comments

+++--
3.9 rating from 39 votes

10 Comments »

Comments feed TrackBack URI

No links?

Comment by JimNeath — December 22, 2008

http://random.friggeri.net/jquery-gestures/

Comment by Spir — December 22, 2008

lol!

Comment by sidonaldson — December 22, 2008

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.

Comment by mvcoile — December 22, 2008

Please always add a link to the article. Some of these things are useful.

Comment by cssProdigy — December 22, 2008

Not sure when I would use it, but its pretty damn cool. Also – a really good use of canvas.

Comment by genericallyloud — December 22, 2008

Actually, the original blog article is here :
http://friggeri.net/blog/2008/12/21/jquery-gestures

Comment by AdrienFriggeri — December 22, 2008

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.

Comment by Rey Bango — December 22, 2008

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.

Comment by oopstudios — December 22, 2008

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.

Comment by Jigs — December 22, 2008

Leave a comment

You must be logged in to post a comment.