Jeegoocontext documentation

Version 2.0.0

A contextmenu can be initialized in two ways:

  1. $('selector').jeegoocontext('menu id');
  2. $('selector').jeegoocontext('menu id', 'options');
  1. selector contains the context to be bound to the menu and can be any jQuery selector.
  2. menu id contains the id of the context menu (without the "#").
  3. options is an object which can be configured with both properties and callbacks

Options properties

Name Type Default value Scope Function
hoverClass String 'hover' Menu This class is set to hovered menu-items and their direct children.
activeClass String 'active' Global This class is set to the current active context (the area that was right-clicked to open the context menu). Because this variable is global (applies to all context on a page) it only needs to be set once when using multiple context menus. If set more than once, the last supplied value counts.
menuClass String 'jeegoocontext' Global This class must be included by all context menus on a page and is used to show one menu at a time when using multiple menus. Because this variable is global (applies to all context menus on a page) it only needs to be set once when using multiple context menus. If set more than once, the last supplied value counts.
autoAddSubmenuArrows Boolean true Menu If set to true, arrows are automatically added to menu items containing submenus. These arrows take the form of span elements prepended to the menu items.
submenuClass String 'submenu' Menu If options.autoAddSubmenuArrows is true, this class is set to the span elements forming the submenu arrows.
separatorClass String 'separator' Menu Menu items with this class are skipped during the loop through the menu items when holding down the up or down arrow key.
fadeIn Number 200 Menu The time it takes in milliseconds for the menu and any submenus to fade-in.
delay Number 300 Menu The time it takes in milliseconds for unhovered menu item’s submenus to hide. This enables users to select submenu items by moving over other items or the document without immediately closing the submenu.
keyDelay Number 100 Menu The time between two menu item hovers when holding down the up or down arrow key. Determines the loop speed.
widthOverflowOffset Number 0 Menu This value can be used to influence width-overflow behavior. When set to 20 for example the context menu and any submenus will always position themselves at least 20 pixels from the right-margin of the window.
heightOverflowOffset Number 0 Menu This value can be used to influence height-overflow behavior. When set to 20 for example the context menu and any submenus will always position themselves at least 20 pixels from the bottom-margin of the window.
submenuLeftOffset Number 0 Menu This value can be used to horizontally offset submenus relatively to their parent menus. If set to -3 for example, each submenu overlaps it’s parent by 3 pixels.
submenuTopOffset Number 0 Menu This value can be used to vertically offset submenus relatively to their parent menus. If set to -3 for example, each submenu is placed 3 pixels above it’s parent. However, on height-overflow conditions this value is ignored.
operaEvent String 'ctrl+click' Menu The event used by older versions of Opera to open the menu.
event String undefined Menu When set, this event (instead of the right-click event) is used to open the menu. This event also overrides the operaEvent property. Can be set to 'shift+click' or 'click' for example, to open the menu on a shift-click or left-click event.
openBelowContext Boolean undefined Menu When set to true, instead of opening at the clicked position the contextmenu opens at the lowerleft corner of the context. The first level of the menu automatically maintains its vertical position regardless of height overflow and window resizes. This feature can be used to create a contextmenu opened by a button, or to create multilevel dropdown menus.
ignoreWidthOverflow Boolean undefined Menu When set to true, width overflow is ignored which causes the menu to expand across the right boundary of the window.
ignoreHeightOverflow Boolean undefined Menu When set to true, height overflow is ignored which causes the menu to expand across the bottom boundary of the window.
startLeftOffset Number 0 Menu This value is added to the left position where the menu is about to show/fade-in.
startTopOffset Number 0 Menu This value is added to the top position where the menu is about to show/fade-in.
keyboard Boolean true Menu When set to false, the menu doesn't respond to keyboard events.
autoHide Boolean undefined Menu When set to true, the whole menu hides after the mouse pointer exits the menu. The delay property controls the time between exiting the menu and hiding the menu.
wrapper String 'body' Menu The element to which the menu invocation event is delegated.

Options callbacks

The options object can be configured with the following four callbacks:

  1. onShow
  2. onHover
  3. onSelect
  4. onHide

Each of these callbacks receives two parameters: e and context, where e refers to the original event object and context refers to the area on which the menu was invoked. From within these callbacks the menu’s default behavior can be cancelled by returning false. The onShow callback receives two additional parameters: startLeft and startTop. These parameters contain the location where the menu is about to show/fade-in.

Name "this" refers to Invoked on Default behavior
onShow menu Right-click on bound context.
  1. Hide all menus on page.
  2. Remove active class from all context on a page.
  3. Add active class to the clicked context.
  4. Fade-in menu.
onHover menu item Mouseover on menu item. Position and fade-in submenus.
onSelect menu item Click on menu item.
  1. Remove active class from the current active context.
  2. Hide menu.
onHide menu Click on document.
  1. Remove active class from all context on a page.
  2. Hide menu.