Jeegoocontext documentation

Version 1.2.0

A context menu can be initialized in two ways:

  1. $('selector').jeegoocontext('menu id');
  2. $('selector').jeegoocontext('menu id', 'options');

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

Any context can be unbound from it's menu by calling $ ('context').nojeegoocontext();

Options properties

Name Type Default value Scope Function
livequery Boolean undefined Menu If set to true, context is bound to the menu via livequery enabling dynamically added content to be automatically bound to the menu without reinitializing the menu.
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.
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.
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 'dblclick' Menu The event used by 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 'click' for example, to open the menu on a left-click event.

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.

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.