Jeegoocontext, a jQuery context menu plugin
Jeegoocontext is a jQuery plugin that allows for multiple custom context menus (pop-up menus) to exist on a single page. The plugin is able to transform any unordered list appended to the body into a multi-level, intelligently positioned styled context menu via a single call.
Features:
Easy to implement
Steps required to implement the plugin:
- Include references to the jquery library, and to jquery.jeegoocontext.min.js.
- Select a skin (skins cm_default and cm_blue included in the code-download) and include a reference to the skin's stylesheet.
- Append an unordered list to the body and give it a unique id and the following class name: "jeegoocontext" and the class name for the skin: "cm_default" or "cm_blue" for example.
- Bind any context to the menu with the following call: $('context').jeegoocontext('menu id'); Where 'context' can be any jQuery selector and 'menu id' contains the unique id of the menu, for example: $('.context').jeegoocontext('menu_1');
Both vertical and horizontal intelligent positioning
Normally the context menu opens exactly at the clicked position. However, when opened at the near edges of a webpage, the menu and subsequent submenus are offset to the left/top to avoid overflow to the right/bottom.
Overflow behavior can be customized by adjusting the widthOverflowOffset and heightOverflowOffset properties on the options object.
Customizable time delays to provide easy selection of items
The delay property on the options object provides time-out values to the menu to allow for easy selection of submenu items. Without these delays expanded submenus collapse immediately after a user moves his/her mouse to another list-item, which can be very annoying. The following animations illustrate these conditions:
No delays
Delays
Multiple context menus on a single page
Each page can contain multiple context menus. All that is required is that each menu contains a unique id and they all share the "jeegoocontext" class (overridable via the options.menuClass property).
Fully css customizable UI
The plugin contains very little presentation script, so the UI can be fully styled via css. The code-download includes a skins folder containing two skins named: "cm_default" and "cm_blue". These skins consist of nothing more than an images folder and a stylesheet.
Customizable behavior via callbacks
The plugin publishes the following four useful events to provide customizable behavior:
- onShow
- onHover
- onSelect
- onHide
From within each of these callbacks default behavior can be cancelled by returning false.
Customizable class names to avoid potential naming conflicts
The plugin uses the following class names:
- active
- hover
- jeegoocontext
- submenu
- separator
All class names are overridable to avoid potential naming conflicts.
Opera compatible
Opera doesn't allow right-click event overrides. When the plugin detects Opera it automatically binds the menu to the doubleclick event. The event-type can be overriden via the operaEvent property on the options object.
Cross-browser support
The plugin was tested in the following browsers: Opera 10, Safari 4, Chrome 3, Firefox 3, Internet Explorer 6, 7 & 8. Although compatible with all these browsers, it is not recommended to use the styled skin in IE 6 due to some (possible) weird caching bug. For some reasen IE 6 decides to re-download all images used in the menu on every mouseover.
Keyboard support
The escape key closes the menu. The enter key selects a menu-item. The arrow keys can be used to move between different menu-items and submenus. Both the up and down arrow keys can be hold down to loop through the menu-items.
Lightweight
The minified version of the script is just under 6 kb in size.
Unobtrusive
No changes to the page html are required except for appending the context menu to the body.
Suggestions? We would like to hear about your experiences with the JeeGoo context menu.
E-mail is not required
Gerd, thanks for the feedback. I'm aware of the multiple events registered on the document, but i haven't had time to fix this. Your solution sounds good though.
Denis, you can send the modified version to info at planitworks.nl.
Hi Erik,
we found a bunch of performance problems when using a lot of contextmenus on a single site. Within the jegoocontext-function you are registering the events onmouseover and onclick on the $(document) element for each menu - even if it's not yet open.
We're using your menu in an ajax-powered application and so every postback registers us several new events and makes the menu very slow.
A suggestion to work a round this problem would be to move the block starting with $(document).mouseover(function(e){ to the position immediately below the // Fade-in menu at clicked-position.
$menu.css({
'left': e.pageX + 'px',
'top': e.pageY + 'px'
}).fadeIn(_menus[id].fadeIn); statement.
This causes the event to be registered only when needed (when the menu pops up).
Also it would be great to unregister the events as soon as the menu closes.
Thanks for your great menu component and i hope you will be able to implement my feedback
best regards
Gerd
Hi Erik. I've made some improvements to your plugin. How can I contact you to send that modified version of the plugin to you?
Hi Denis, i'm glad you like the plugin. I'll look into these issues asap.
Here's the fix to the bug I've found. Replace the code at string 164 with the one below:
'left': (overflow.width > 0) ? (-$submenu.parent().parent().width() - _menus[id].submenuLeftOffset + 'px') : ($submenu.parent().parent().width() + _menus[id].submenuLeftOffset + 'px'),
Erik, you should calculate the offset for a submenu using the width of its parent, not itself. Because, like in my case, the parent's width was less than the submenu's and thus the submenu appeared the more far from the parent menu the wider that submenu was.
Hi, it's me again. I've just found a bug in the plugin: if a submenu doesn't have a fixed width (width:auto), then the plugin incorrectly calculates the left offset. The wider a submenu the more far from the root menu it will appear, regardless of the submenuLeftOffset parameter. Hope this info would be helpful and the bug will be fixed soon!
Hey. Thanks for a great plugin!
I am using this plugin for showing both context and standard menus. The latter, however, is usually shown when a button is pressed. Therefore, it would be great if you add to your plugin an ability to bind the top left corner of a menu not only to current pointer coords, but also to a DOM element coords (in my case I would bind it to the bottom left corner of a button so the menu would appear just below that button).
Thanks again for your work!
> pako
Simple (temporary) solution
Line 101
<Before>
if(_menus[id].autoAddSubmenuArrows)$('#' + id).find('li:has(ul)').prepend('span class="' + _menus[id].submenuClass + '"/span');
<After>
if(_menus[id].autoAddSubmenuArrows && !$('#' + id).find('span.submenu').length)$('#' + id).find('li:has(ul)').prepend('span class="' + _menus[id].submenuClass + '"/span');
Great work. But how can I unbind the plugin's events...?