Erik van den Berg.NET developer

Jeegoocontext, a jQuery contextmenu plugin

Jeegoocontext is a jQuery plugin that allows for multiple custom contextmenus (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 contextmenu via a single call. JeeGoocontext is extensively used in my Free Form Builder software.

Easy to implement

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

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

Older versions of Opera don't allow right-click event overrides. When the plugin detects older versions of Opera it automatically binds the menu to the ctrl+click 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. Apart from some minor bugs in IE 6 and IE7, the menu works in all these browsers.

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.