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

skull skull

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
contextMenusAn array of Context Menu Definitions that makes up the available set for this bind
buildA 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
nameThe name of the menu. This is used to identify which menu to display
widthThe width of the menu item.190
itemsAn 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
textThe text displayed in the menu item.
runThe 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).
iconCssClassThe css class applied to the left hand span. Allows you to add icons if you wish.
itemsAn array of sub menu items that will appear as a popout on hover.

Dependencies