Jeegoocontext documentation
Version 1.1A context menu can be initialized in two ways:
- $('selector').jeegoocontext('menu id');
- $('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.
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 elements prepended to the menu-items. |
| submenuClass | String | 'submenu' | Menu | If options.autoAddSubmenuArrows is true, this class is set to the 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 | 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 | 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 | 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 | 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. |
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.
| 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
