The rich:contextMenu component provides hierarchical context menu systems similar to those found in many desktop applications.
<!DOCTYPE html> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:rich="http://richfaces.org/rich"> <h:outputStylesheet> .pic { margin-bottom: -4px; margin-right: 2px; } .search .rf-ddm-itm-sel { background-color: transparent; background-image: none; border-color: transparent; cursor: default; } </h:outputStylesheet> <h:form id="form"> <h:outputScript> //<![CDATA[ function resize(pic, coeff) { var w = Math.round(pic.width * coeff); var h = Math.round(pic.height * coeff); if (w > 1 && h > 1 && h<1000 && w<1000) { pic.width = w; pic.heigth = h; } } function enlarge(element){ resize(element, 1.1); } function decrease(element){ resize(element, 0.9); } //]]> </h:outputScript> <h:graphicImage library="org.richfaces.showcase" name="img/pic1.jpg" id="pic" style="border : 5px solid #E4EAEF"/> <rich:contextMenu target="pic" mode="client" showEvent="click"> <rich:menuItem label="Zoom In" onclick="enlarge(#{rich:element('pic')});" id="zin"/> <rich:menuItem label="Zoom Out" onclick="decrease(#{rich:element('pic')});" id="zout"/> </rich:contextMenu> </h:form> </ui:composition>
The context menu is invisable until triggered by a user action on the parent object. In this example, the context menu is displayed when one left-clicks on the image.
Much like drop-down menus, context menus can contain a set of rich:menuItem components, rich:menuGroup components, and rich:menuSeparator components. Menu groups are used for secondary levels on the menu. Menu separators are represented with horizontal lines between items or groups. Menu items are active elements that might produce Ajax or non-Ajax requests. The submission mode is defined with mode attribute, which has three possible options: server, ajax, or client. The client mode does not submit a request, but allows you to provide your own functionality inside the menu item with any in-line content. The mode attribute can be over-ridden in child items.
