jQuery context menu

Project on Github

code and issues on github: https://github.com/danielecr/jquery-contextual-menu !

Prize

June 2014 jsclasses.org innovation award

Thanks to this prize I got a book from Addy Osmani, design pattern in javascript.

The idea behind context menu

Ok, I admit I do not search to much out there if this is available..

A simple jquery plugin that permit to show context menu

I take inspiration from yahoo library: here is an example

But I want it as jquery plugin and also I want to have option to choose the way it should work, for example I also want to fire context menu on hold down left mouse button for 1 second, or just hover on element.

Also I want that normal click behave correctly on anchor elements that have option menu installed on those, thus click is a click, hold down for 1 second is a context menu fireup.

Ok, I have put it in a plugin, also I have made an example of the use with a small drupal module that use the plugin. The drupal module define a filter for {'image:id:relativepath:width} and {'imagedata:selector:type:timeout}

Normally the jquery plugin is used this way:

function func1(e,el){
  alert(el.tagName);
}
function func2(e,el){
  alert(el.tagName);
}
$(document).ready(function(){
  $(".linkimgs").contextmenu({'option 1':func1,
                              'option 2':func2},
                             'hold',1000);
});

with first parameter being the menu object (property name:function), second parameter type, could be right (right click), hold (hold down left button for timeout) or hover (stay hover element for timeout). Third parameter is timeout, used in hold, hover.

The callback menu function is called with event jquery object (the event is the click on context menu) and the element to which is attached the menu.

The menu is a ul with id “contextmenu”, this could be changed via $.contextmenu var, but it is an id because there must be only one context menu in a page, an example style is:

{syntaxhighlighter brush:css}
#contextmenu{
margin:0;
padding:0;
border: 1px solid #000;
background:#ccc;
}
#contextmenu li {
list-style-type:none;
margin:1px;
padding:2px;
cursor:pointer;
}
#contextmenu li.hover{
background: #ddd;
}
{/syntaxhighlighter}


Drupal example module (imagedata)

http://www.lullabot.com/articles/drupal-input-formats-and-filters is a good explanation of input filter in drupal and on how to configure it

The module define also a menu item for /imagedata/info/ that return image file info passed with the rest of the url

Javascript in module (contextmenu callback) is not complete, it works sizex and Zoom.

Example

Traditional context menu (right mouse button)
{‘imagedata:#target1:right}
{imagedata:#target1:right}
prato

Hold context menu (hold left mouse button for 1.5 seconds)
{‘imagedata:#target2:hold:1500}
{imagedata:#target2:hold:1500}
monte

Hover context menu (hover image with mouse for 2 seconds)
{‘imagedata:#target3:hover:2000}
{imagedata:#target3:hover:2000}
monte

About the images

The first photo (the valley landscape) is taken from Monte Cucco, Umbria.
The mountain in the other picture is near Laghi di Pilato, Sibillini, Marche.
Both shot by a Nokia N80 cellphone. You are free to use it.

Comments

What do you think about this plugin? there is something missing? things you would do better?

code and issues on github: https://github.com/danielecr/jquery-contextual-menu !

Update

2010-10-17: (Saint Catervus) fix problem with ie event model and scroll position fix for “event not normalized by jquery” case. Thanks Joe report.
2010-12-23: fix problem with nested context menu: stop propagation. Fearnloath report.
2011-01-14: return selection object for jquery chaining. Thanks to Patrick Corcoran
2011-01-14 (later):fixed opera bug (Maciej Pilarczyk)



Posted

in

by