⁠14.2. <rich:contextMenu>

The <rich:contextMenu> component is used for creating a hierarchical context menu that are activated on events like onmouseover , onclick etc. The component can be applied to any element on the page.
⁠
<rich:contextMenu>

Figure 14.2. <rich:contextMenu>

⁠14.2.1. Basic usage

To set the content of the context menu and any sub-menus, use the <rich:menuItem>, <rich:menuGroup>, and <rich:menuSeparator> components. These components are detailed in Section 14.3, “Menu sub-components”.

⁠14.2.2. Appearance

Use the direction attribute to determine the direction of the menu when it appears. The direction attribute uses the following settings:
topLeft, topRight, bottomLeft, bottomRight
The menu appears to the top-left, top-right, bottom-left, or bottom-right of the activation point.
auto
The direction is determined automatically.
autoLeft, autoRight, topAuto, bottomAuto
The menu direction is determined automatically, but defaults to either the left, right, top, or bottom of the activation point as appropriate.

⁠14.2.3. Expanding and collapsing the menu

By default, the menu is activated when the contextmenu event is observed (ie. a right-click). To activate on a different event, use the showEvent attribute to define the event instead.
Menus can be navigated using the keyboard. Additionally, menus can be navigated programmatically using the JavaScript API. The JavaScript API allows the following methods:
show()
The show() method shows the menu.
hide()
The hide() method hides the menu.
activateItem(menuItemId)
The activateItem(menuItemId) activates the menu item with the menuItemId identifier.
Use the mode attribute to determine how the menu requests are submitted:
  • server, the default setting, submits the form normally and completely refreshes the page.
  • ajax performs an Ajax form submission, and re-renders elements specified with the render attribute.
  • client causes the action and actionListener items to be ignored, and the behavior is fully defined by the nested components or custom JavaScript instead of responses from submissions.

⁠14.2.4. Reference data

  • component-type: org.richfaces.ContextMenu
  • component-class: org.richfaces.component.UIContextMenu
  • component-family: org.richfaces.ContextMenu
  • renderer-type: org.richfaces.ContextMenuRenderer

⁠14.2.5. Style classes and skin parameters

⁠

Table 14.2. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties
.rf-ctx-lbl
This class defines styles for the top level container of the context menu.
headerFamilyFont
font-family
.rf-ctx-dis
This class defines styles for the context menu when it is disabled.
tabDisabledTextColor
color
.rf-ctx-lbl-dis
This class defines styles for the top level of the context menu when it is disabled.
headerFamilyFont
font-family
.rf-ctx-pos
This class defines the positioning of the context menu.
No skin parameters.
.rf-ctx-lbl-unsel
This class defines styles for the top level of the context menu when it is unselected.
No skin parameters.
.rf-ctx-lst
This class defines styles for the context list.
panelBorderColor
border-color
additionalBackgroundColor
background-color
.rf-ctx-lst-bg
This class defines styles for the background of the context list.
additionalBackgroundColor
border-color
.rf-ctx-sublst
This class defines the positioning of the menu when used as a sub-menu.
No skin parameters.
.rf-ctx-itm
This class defines styles for a menu item.
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-ctx-itm-sel
This class defines styles for a menu item when it is selected.
headerBackgroundColor
border-color
tabBackgroundColor
background-color
.rf-ctx-itm-unsel
This class defines styles for a menu item when it is unselected.
No skin parameters.
.rf-ctx-itm-dis
This class defines styles for a menu item when it is disabled.
tabDisabledTextColor
color
.rf-ctx-itm-lbl
This class defines styles for the label in a menu item.
generalTextColor
color
.rf-ctx-itm-ic
This class defines styles for the icon in a menu item.
No skin parameters.
.rf-ctx-emptyIcon
This class defines styles for an empty icon in a menu item.
No skin parameters.
.rf-ctx-sep
This class defines styles for a menu separator.
panelBorderColor
border-top-color
.rf-ctx-nd
This class defines styles for a menu node.
No skin parameters.