RichFaces rich（panelMenu使用示例） rich组件|RichFaces

本文概述

样式类和皮肤参数
例子

该组件与< rich：panelMenuItem> 和< rich：panelMenuGroup> 结合使用, 以创建扩展的分层菜单。 < rich：panelMenu> 组件的外观可以进行高度自定义, 并且层次结构可以扩展到任意多个子级别。
< rich：panelMenu> 组件不需要为基本用法声明任何其他属性。但是, 它确实需要子< rich：panelMenuGroup> 和< rich：panelMenuItem> 组件。
样式类和皮肤参数下表包含panelMenu的样式类和相应的外观参数。

Class	Function	Skin Parameters	映射的CSS属性
.rf-pm	它用于定义面板菜单本身的样式。	没有皮肤参数。
.rf-pm-gr	它用于定义面板菜单组的样式。	panelBorderColor	border-top-color
.rf-pm-exp, .rf-pm-colps	这些类定义面板菜单在展开或折叠时的样式。	没有皮肤参数。
.rf-pm-ico	用于定义面板菜单图标的样式。	没有皮肤参数。
.rf-pm-ico-exp, .rf-pm-ico-colps	这些类定义面板菜单图标在展开或折叠时的样式。	没有皮肤参数。
.rf-pm-hdr-exp, .rf-pm-hdr-colps	这些类在展开或折叠时为面板菜单标题定义样式。	没有皮肤参数。
.rf-pm-itm	它用于定义面板菜单项的样式。	panelBorderColor generalTextColor	border-top-color color
.rf-pm-itm-gr	它用于定义面板菜单项的样式, 作为面板菜单组的一部分。	没有皮肤参数。
.rf-pm-itm:hover	当鼠标悬停在面板菜单项上时, 它用于定义样式。	additionalBackgroundColor	background-color
.rf-pm-itm-sel	选择面板菜单项时, 用于定义样式。	没有皮肤参数。
.rf-pm-itm-dis	禁用时, 用于定义面板菜单项的样式。	tabDisabledTextColor	color
.rf-pm-itm-ico	它用于定义面板菜单项中图标的样式。	没有皮肤参数。
.rf-pm-itm-exp-ico	展开时, 用于定义面板菜单项中图标的样式。	没有皮肤参数。
.rf-pm-itm-lbl	它用于定义面板菜单项中标签的样式。	generalSizeFont generalFamilyFont	字体大小的字体族
.rf-pm-gr	它用于定义面板菜单组的样式。	panelBorderColor	border-top-color

例子在下面的示例中, 我们正在实现< rich：panelMenu> 组件。本示例包含以下文件。
JSF文件
【RichFaces rich（panelMenu使用示例）】// panel-menu.xhtml

< ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://java.sun.com/jsf/html"xmlns:a4j="http://richfaces.org/a4j"xmlns:rich="http://richfaces.org/rich"xmlns:f="http://java.sun.com/jsf/core"xmlns:ui="http://java.sun.com/jsf/facelets"> < f:view> < h:head> < title> Panel Menu < /title> < /h:head> < h:body> < h:form> < rich:panelMenu topGroupExpandedRightIcon="chevronUp"topGroupCollapsedRightIcon="chevronDown"groupExpandedLeftIcon="disc"groupCollapsedLeftIcon="disc"> < rich:panelMenuGroup label="File"> < rich:panelMenuItem label="New"/> < rich:panelMenuItem label="Open"/> < rich:panelMenuItem label="Save"/> < /rich:panelMenuGroup> < rich:panelMenuGroup label="Edit"> < rich:panelMenuItem label="Cut"/> < rich:panelMenuItemlabel="Copy"/> < rich:panelMenuItem label="Paste"/> < rich:panelMenuGroup label="Delete"> < rich:panelMenuItem label="Delete All"/> < rich:panelMenuItem label="Recover"/> < rich:panelMenuItem label="Find"/> < /rich:panelMenuGroup> < rich:panelMenuItem label="Replace"/> < /rich:panelMenuGroup> < rich:panelMenuItem label="Tools"/> < /rich:panelMenu> < /h:form> < /h:body> < /f:view> < /ui:composition>

输出
默认情况下, 面板处于折叠状态。