Jeegoocontext documentation
Version 1.3
A context menu can be initialized in two ways:
- $('selector').jeegoocontext('menu id');
- $('selector').jeegoocontext('menu id', 'options');
'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, both context and menu items are bound via livequery, enabling dynamically added content and menu items 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. |
| 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. |
Options callbacks
The options object can be configured with the following four callbacks:
- onShow
- onHover
- onSelect
- 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. |
|
| onHover | menu item | Mouseover on menu item. | Position and fade-in submenus. |
| onSelect | menu item | Click on menu item. |
|
| onHide | menu | Click on document. |
|
<< JeeGoo Context
