Context Menu Binding
The context menu binding allows you to specify reactable context menus in json. Dom elements with the binding specify a build function that gets called when a right click operation is detected.
The build method allows you to customize which menu is displayed and which items on that menu are disabled.
Usage
Markup
Javascript
Results
Right click the two images to see the context menu
Notice how the same menu has different items disabled. Also notice the positioning flip behavior on the far right image.
Options
Context Menu Set
Name |
Description |
Default |
contextMenus | An array of Context Menu Definitions that makes up the available set for this bind | |
build | A function that decides which menu item in the set to display and which items to disable. This function must return an object of the form { name: 'NAME', disable: ['ITEMNAME'] }. This can be a function definition or the string name of the function. The context menu binding will try to evaluate the string if a function type is not detected (useful when the configuration is passed via json). | |
Context Menu Definition
Name |
Description |
Default |
name | The name of the menu. This is used to identify which menu to display | |
width | The width of the menu item. | 190 |
items | An array of content menu items that make up the menu. These can be functional items or separators (see example). | |
Context Menu Item
Name |
Description |
Default |
text | The text displayed in the menu item. | |
run | The function to be run when the menu item is clicked. his can be a function definition or the string name of the function. The context menu will try to evaluate the string if a function type is not detected (useful when the configuration is passed via json). | |
iconCssClass | The css class applied to the left hand span. Allows you to add icons if you wish. | |
items | An array of sub menu items that will appear as a popout on hover. | |
Dependencies
- Knockout 1.2.0
- Knockout Mapping Plugin
- Jquery 1.6+
- Jquery tmpl
- Jquery UI Position
- Knockout UI Util