Primefaces菜单完全指南：创建菜单栏、菜单按钮、分级菜单和滑动菜单的实例教程

2 年 ago

清, 宇

20 minutes

这个教程的主要目的是介绍与Primefaces实现一起使用的主菜单组件。通常情况下，互联网上的大量应用程序使用不同类型的菜单。该教程将介绍以下几种类型的菜单：

菜单（Menu）：是一种带有子菜单和菜单项的导航组件。
菜单栏（MenuBar）：是一种水平导航组件。
菜单按钮（MenuButton）：用于在弹出菜单中显示不同的命令。
分级菜单（TieredMenu）：用于显示带有覆盖层的嵌套子菜单。
滑动菜单（SlideMenu）：用于显示带有滑动动画的嵌套子菜单。

让我们开始解释所有这些菜单类型，以查看Primefaces为这种组件提供的所有功能。

菜单基本信息 – Primefaces

标签	menu
组件类	org.primefaces.component.menu.Menu
组件类型	org.primefaces.component.Menu
组件族	org.primefaces.component
渲染器类型	org.primefaces.component.MenuRenderer
渲染器类	org.primefaces.component.menu.MenuRenderer

Primefaces菜单 – 属性

名称	默认值	类型	描述
id	null	String	组件的唯一标识符。
rendered	true	Boolean	指定组件是否渲染的布尔值，设置为false时组件将不会被渲染。
binding	null	Object	映射到支持Bean中服务器端UIComponent实例的EL表达式。
widgetVar	null	String	客户端小部件的名称。
model	null	MenuModel	用于以编程方式创建菜单的菜单模型实例。
trigger	null	String	要附加覆盖菜单的目标组件。
my	null	String	菜单与触发元素对齐的角。
at	null	String	触发器与菜单元素对齐的角。
overlay	false	Boolean	定义菜单位置类型，可以是静态或覆盖。
style	null	String	主容器元素的内联样式。
styleClass	null	String	主容器元素的样式类。
triggerEvent	click	String	显示动态定位菜单的事件。

Primefaces菜单 – 入门指南

一个菜单由子菜单和菜单项组成。子菜单用于分组菜单项，而菜单项对应所需的操作。以下示例展示了Menu组件最简单的使用方法。index.xhtml。

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:menu>
		<p:submenu label="文件">
			<p:menuitem value="打开"></p:menuitem>
			<p:menuitem value="编辑"></p:menuitem>
			<p:separator/>
			<p:menuitem value="退出"></p:menuitem>
		</p:submenu>
		<p:submenu label="帮助">
			<p:menuitem value="关于Primefaces"></p:menuitem>
			<p:menuitem value="联系我们"></p:menuitem>
			<p:separator/>
			<p:menuitem value="帮助"></p:menuitem>
		</p:submenu>
	</p:menu>
</h:form>
</html>

Primefaces 菜单 – 覆盖式菜单

菜单可以以两种方式定位：静态或动态。静态位置意味着菜单在正常页面流程中。相反，动态菜单不在页面的正常流程中，使其能够覆盖其他元素。要动态定义菜单，您应该按照以下步骤进行操作：

通过将overlay属性设置为true，并将菜单的trigger属性与触发操作的id相关联，来正常定义您的菜单。
调整菜单的my和at属性，分别指定菜单与触发元素对齐的角，以及触发元素与菜单元素对齐的角。
my和at属性只接受left、right、bottom和top的组合值。

index1.xhtml 示例代码

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:menu overlay="true" trigger="triggerButton" my="left top" at="right top">
		<p:submenu label="File">
			<p:menuitem value="Open"></p:menuitem>
			<p:menuitem value="Edit"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Exit"></p:menuitem>
		</p:submenu>
		<p:submenu label="Help">
			<p:menuitem value="About Primefaces"></p:menuitem>
			<p:menuitem value="Contact Us"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Help"></p:menuitem>
		</p:submenu>
	</p:menu>
	<p:commandButton id="triggerButton" value="Trigger Menu"></p:commandButton>
</h:form>
</html>

一旦触发菜单操作被激活，您定义的菜单就会被显示。

Primefaces菜单 – Ajax和非Ajax操作

现在，你已经开发了一个简单的静态菜单和一个更复杂的动态菜单。这两个菜单都包含与菜单所提供的操作相对应的菜单项。这些菜单项实际上也是像p:commandButton一样的操作，因此你也可以使用ajax对它们进行处理。

index2.xhtml 示例代码

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:growl id="message"></p:growl>
	<p:menu overlay="true" trigger="triggerButton" my="left top" at="right top">
		<p:submenu label="File">
			<p:menuitem value="Open" action="#{menuManagedBean.openAction}" update="message"></p:menuitem>
			<p:menuitem value="Edit"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Exit"></p:menuitem>
		</p:submenu>
		<p:submenu label="Help">
			<p:menuitem value="About Primefaces"></p:menuitem>
			<p:menuitem value="Contact Us"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Help"></p:menuitem>
		</p:submenu>
	</p:menu>
	<p:commandButton id="triggerButton" value="Trigger Menu"></p:commandButton>
</h:form>
</html>

MenuManagedBean.java 示例代码

package com.Olivia.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class MenuManagedBean {
	public String openAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Open action has activiated asynchrounsly !"));
		return "";
	}
}

Primefaces 编程式菜单创建

菜单也可以通过编程方式创建，这种方法比声明式方式更加灵活。您可以使用org.primefaces.model.MenuModel实例来定义菜单结构。p:submenu、p:menuitem和p:separator等组件都有对应的默认实现，专门用于编程式菜单定义。以下示例展示了之前开发的相同业务场景，但这次菜单将以编程方式呈现。index3.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:growl id="message"></p:growl>
	<p:menu overlay="true" trigger="triggerButton" my="left top" at="right top" model="#{menuManagedBean.menu}">
	</p:menu>
	<p:commandButton id="triggerButton" value="触发菜单"></p:commandButton>
</h:form>
</html>

菜单ManagedBean.java

package com.Olivia.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.DefaultSeparator;
import org.primefaces.model.menu.DefaultSubMenu;
import org.primefaces.model.menu.MenuModel;

@ManagedBean
@SessionScoped
public class MenuManagedBean {
	private MenuModel menu = new DefaultMenuModel();

	public MenuManagedBean(){
		// 创建子菜单
		DefaultSubMenu file = new DefaultSubMenu("文件");
		// 创建子菜单
		DefaultSubMenu help = new DefaultSubMenu("帮助");
		// 创建菜单项
		DefaultMenuItem open = new DefaultMenuItem("打开");
		// 创建菜单项
		DefaultMenuItem edit = new DefaultMenuItem("编辑");
		// 创建菜单项
		DefaultMenuItem exit = new DefaultMenuItem("退出");

		// 创建菜单项
		DefaultMenuItem about = new DefaultMenuItem("关于Primefaces");
		// 创建菜单项
		DefaultMenuItem contact = new DefaultMenuItem("联系我们");
		// 创建菜单项
		DefaultMenuItem helpMenuItem = new DefaultMenuItem("帮助");		

		// 设置菜单项动作
		open.setCommand("#{menuManagedBean.openAction}");

		// 将菜单项关联到子菜单
		file.addElement(open);
		file.addElement(edit);
		file.addElement(new DefaultSeparator());
		file.addElement(exit);

		help.addElement(about);
		help.addElement(contact);
		help.addElement(new DefaultSeparator());
		help.addElement(helpMenuItem);

		// 将子菜单关联到菜单
		menu.addElement(file);
		menu.addElement(help);
	}

	public MenuModel getMenu() {
		return menu;
	}

	public void setMenu(MenuModel menu) {
		this.menu = menu;
	}

	public String openAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("打开操作已异步激活！"));
		return "";
	}
}

Primefaces 菜单栏 – 基本信息菜单栏是一个水平导航组件。

标签	菜单栏
组件类	org.primefaces.component.menubar.Menubar
组件类型	org.primefaces.component.Menubar
组件族	org.primefaces.component
渲染器类型	org.primefaces.component.MenubarRenderer
渲染器类	org.primefaces.component.menubar.MenubarRenderer

Primefaces菜单栏-属性

名称	默认值	类型	描述
id	null	字符串	组件的唯一标识符。
rendered	true	布尔值	指定是否渲染组件的布尔值，设置为false时将不渲染组件。
binding	null	对象	映射到后端Bean中服务器端UIComponent实例的EL表达式。
widgetVar	null	字符串	客户端小部件的名称。
model	null	MenuModel	用于以编程方式创建菜单的MenuModel实例。
style	null	字符串	菜单栏的内联样式。
styleClass	null	字符串	菜单栏的样式类。
autoDisplay	false	布尔值	定义是否在鼠标悬停时显示第一级子菜单。设置为false时，需要点击事件才能显示。

Primefaces菜单栏 – 入门指南

类似于菜单组件，菜单栏需要将p:submenu和p:menuitem作为其子元素来构成菜单栏结构。

Primefaces 菜单栏 – 嵌套菜单

菜单栏支持嵌套菜单

菜单栏支持嵌套菜单，即在另一个父级菜单内提供子菜单。index5.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:menubar>
		<p:submenu label="文件">
			<p:submenu label="打开">
				<p:menuitem value="打开Excel文件"></p:menuitem>
				<p:menuitem value="打开Word文件"></p:menuitem>
				<p:menuitem value="打开PowerPoint文件"></p:menuitem>
			</p:submenu>
			<p:menuitem value="编辑"></p:menuitem>
			<p:separator/>
			<p:menuitem value="退出"></p:menuitem>
		</p:submenu>
		<p:submenu label="帮助">
			<p:menuitem value="关于JournalDev"></p:menuitem>
			<p:menuitem value="联系我们"></p:menuitem>
			<p:separator/>
			<p:menuitem value="帮助"></p:menuitem>
		</p:submenu>
	</p:menubar>
</h:form>
</html>

Primefaces菜单栏-根菜单项

菜单栏还支持根菜单项，这是通过在p:menubar中提供直接的p:menuitem子组件来实现的。

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:menubar>
		<p:menuitem value="打开"></p:menuitem>
	</p:menubar>
</h:form>
</html>

Primefaces菜单栏-Ajax和非Ajax操作

与p:commandButton组件一样，p:menuitem也支持将动作进行Ajax化处理。您已经在p:menu部分中体验过这一点。您可以使用p:menuitem来执行操作-Ajax和非Ajax-以及导航。以下示例向您展示了p:menuitem的不同用法。index7.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
<p:growl id="message"></p:growl>
	<p:menubar>
		<p:submenu label="文件">
			<p:submenu label="打开">
				<p:menuitem value="Ajax操作" action="#{menubarManagedBean.ajaxAction}" update="message"></p:menuitem>
				<p:menuitem value="非Ajax操作" action="#{menubarManagedBean.nonAjaxAction}" ajax="false"></p:menuitem>
				<p:menuitem value="访问JournalDev" url="https://www.scdev.com"></p:menuitem>
			</p:submenu>
			<p:menuitem value="编辑"></p:menuitem>
			<p:separator/>
			<p:menuitem value="退出"></p:menuitem>
		</p:submenu>
		<p:submenu label="帮助">
			<p:menuitem value="关于JournalDev"></p:menuitem>
			<p:menuitem value="联系我们"></p:menuitem>
			<p:separator/>
			<p:menuitem value="帮助"></p:menuitem>
		</p:submenu>
	</p:menubar>
</h:form>
</html>

菜单栏管理Bean.java

package com.Olivia.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class MenubarManagedBean {
	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax更新"));
		return "";
	}

	public String nonAjaxAction(){
		return "";
	}
}

Primefaces菜单栏-动态菜单

PrimeFaces菜单栏动态创建

菜单栏还支持动态创建功能，您可以通过编程方式创建菜单栏，并提供Ajax、非Ajax和URL等操作，就像您在Ajax和非Ajax操作部分所做的那样。下面是一个示例：

index8.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
<p:growl id="message"></p:growl>
	<p:menubar model="#{menubarManagedBean.menubar}">
	</p:menubar>
</h:form>
</html>

MenubarManagedBean.java 菜单栏管理Bean

package com.Olivia.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.DefaultSeparator;
import org.primefaces.model.menu.DefaultSubMenu;
import org.primefaces.model.menu.MenuModel;

@ManagedBean
@SessionScoped
public class MenubarManagedBean {

	private MenuModel menubar = new DefaultMenuModel();

	public MenubarManagedBean(){
		// 创建所需的子菜单
		DefaultSubMenu file = new DefaultSubMenu("文件");
		DefaultSubMenu open = new DefaultSubMenu("打开");
		DefaultSubMenu help = new DefaultSubMenu("帮助");

		// 创建所需的菜单项
		DefaultMenuItem edit = new DefaultMenuItem("编辑");
		DefaultMenuItem exit = new DefaultMenuItem("退出");

		// 创建所需的菜单项
		DefaultMenuItem ajaxAction = new DefaultMenuItem("Ajax操作");
		ajaxAction.setUpdate("message");
		ajaxAction.setCommand("#{menubarManagedBean.ajaxAction}");

		DefaultMenuItem nonAjaxAction = new DefaultMenuItem("非Ajax操作");
		nonAjaxAction.setAjax(false);
		nonAjaxAction.setCommand("#{menubarManagedBean.nonAjaxAction}");

		DefaultMenuItem urlAction = new DefaultMenuItem("访问JournalDev");
		urlAction.setUrl("https://www.scdev.com");

		DefaultMenuItem about = new DefaultMenuItem("关于JournalDev");
		DefaultMenuItem contactUs = new DefaultMenuItem("联系我们");
		DefaultMenuItem helpMenuItem = new DefaultMenuItem("帮助");

		// 将菜单项与打开子菜单关联
		open.addElement(ajaxAction);
		open.addElement(nonAjaxAction);
		open.addElement(urlAction);

		// 将菜单项与帮助子菜单关联
		help.addElement(about);
		help.addElement(contactUs);
		help.addElement(new DefaultSeparator());
		help.addElement(helpMenuItem);

		// 将打开子菜单与文件子菜单关联
		file.addElement(open);
		file.addElement(edit);
		file.addElement(new DefaultSeparator());
		file.addElement(exit);

		// 将子菜单与菜单栏关联
		this.menubar.addElement(file);
		this.menubar.addElement(help);

	}

	public MenuModel getMenubar() {
		return menubar;
	}

	public void setMenubar(MenuModel menubar) {
		this.menubar = menubar;
	}

	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax更新"));
		return "";
	}

	public String nonAjaxAction(){
		return "";
	}
}

PrimeFaces菜单按钮-基本信息

菜单按钮在弹出菜单中展示不同的命令。

标签	menuButton
组件类	org.primefaces.component.menubutton.MenuButton
组件类型	org.primefaces.component.MenuButton
组件族	org.primefaces.component
渲染器类型	org.primefaces.component.MenuButtonRenderer
渲染器类	org.primefaces.component.menubutton.MenuButtonRenderer

主菜单按钮-属性

名称	默认值	类型	描述
id	null	String	组件的唯一标识符。
rendered	true	Boolean	布尔值，用于指定组件是否渲染，设置为false时组件将不会被渲染。
binding	null	Object	一个映射到支持Bean中服务器端UIComponent实例的EL表达式。
value	null	String	按钮的标签
style	null	String	主容器元素的样式
styleClass	null	String	主容器元素的样式类
widgetVar	null	String	客户端小部件的名称
model	null	MenuModel	用于以编程方式创建菜单的MenuModel实例
disabled	false	Boolean	禁用或启用按钮。
iconPos	left	String	图标的位置，有效值为left和right。
appendTo	null	String	将叠加层附加到由搜索表达式定义的元素。默认为文档主体。

Primefaces菜单按钮 – 入门指南

菜单按钮由一个或多个菜单项组成。其中定义的菜单项与之前已使用的具有相同的相似之处，同时还支持Ajax、非Ajax和导航操作。

index9.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:menuButton value="MenuButton">
		<p:menuitem value="Ajax Action" action="#{menuButtonManagedBean.ajaxAction}" update="message"></p:menuitem>
		<p:menuitem value="Non Ajax Action" action="#{menuButtonManagedBean.nonAjaxAction}" ajax="false"></p:menuitem>
		<p:menuitem value="Go To JournalDev" url="https://www.scdev.com"></p:menuitem>
	</p:menuButton>
</h:form>
</html>

菜单按钮管理Bean.java

package com.Olivia.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.DefaultSeparator;
import org.primefaces.model.menu.DefaultSubMenu;
import org.primefaces.model.menu.MenuModel;

@ManagedBean(name="menuButtonManagedBean")
@SessionScoped
public class MenuButtonManagedBean {
	private MenuModel menuButton = new DefaultMenuModel();

	public MenuButtonManagedBean(){

	}

	public MenuModel getMenuButton() {
		return menuButton;
	}

	public void setMenuButton(MenuModel menuButton) {
		this.menuButton = menuButton;
	}

	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax更新"));
		return "";
	}

	public String nonAjaxAction(){
		return "";
	}
}

Primefaces 菜单按钮 – 动态菜单

Primefaces菜单按钮的编程实现

菜单按钮也可以通过编程方式创建。在前一节中提供的MenuButton示例实际上是使用编程方法来实现的，具体代码如下所示：

index10.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:menuButton value="MenuButton" model="#{menuButtonManagedBean.menuButton}">
	</p:menuButton>
</h:form>
</html>

MenuButtonManagedBean.java

菜单按钮管理Bean。

package com.Olivia.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.MenuModel;

@ManagedBean(name="menuButtonManagedBean")
@SessionScoped
public class MenuButtonManagedBean {
	private MenuModel menuButton = new DefaultMenuModel();

	public MenuButtonManagedBean(){

		// 创建所需的菜单项
		DefaultMenuItem ajaxAction = new DefaultMenuItem("Ajax Action");
		ajaxAction.setUpdate("message");
		ajaxAction.setCommand("#{menubarManagedBean.ajaxAction}");

		DefaultMenuItem nonAjaxAction = new DefaultMenuItem("Non Ajax Action");
		nonAjaxAction.setAjax(false);
		nonAjaxAction.setCommand("#{menubarManagedBean.nonAjaxAction}");

		DefaultMenuItem urlAction = new DefaultMenuItem("Go To JournalDev");
		urlAction.setUrl("https://www.scdev.com");

		this.menuButton.addElement(ajaxAction);
		this.menuButton.addElement(nonAjaxAction);
		this.menuButton.addElement(urlAction);

	}

	public MenuModel getMenuButton() {
		return menuButton;
	}

	public void setMenuButton(MenuModel menuButton) {
		this.menuButton = menuButton;
	}

	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update"));
		return "";
	}

	public String nonAjaxAction(){
		return "";
	}
}

Primefaces层级菜单（TieredMenu）

用于显示带有覆盖层的嵌套子菜单。

标签	TieredMenu
组件类	org.primefaces.component.tieredmenu.TieredMenu
组件类型	org.primefaces.component.TieredMenu
组件系列	org.primefaces.component
渲染器类型	org.primefaces.component.TieredMenuRenderer
渲染器类	org.primefaces.component.tieredmenu.TieredMenuRenderer

Primefaces层级菜单 – 属性

名称	默认值	类型	描述
id	null	字符串	组件的唯一标识符
rendered	true	布尔值	指定组件是否渲染的布尔值，当设置为false时，组件将不会被渲染
binding	null	对象	映射到后台Bean中服务器端UIComponent实例的EL表达式
widgetVar	null	字符串	客户端小部件的名称
model	null	MenuModel	用于编程式菜单的MenuModel实例
style	null	字符串	组件的内联样式
styleClass	null	字符串	组件的样式类
autoDisplay	true	布尔值	定义是否在鼠标悬停时显示第一级子菜单。当设置为false时，需要点击事件才能显示
trigger	null	字符串	其triggerEvent将显示动态定位菜单的组件的ID
my	null	字符串	与触发元素对齐的菜单角落
at	null	字符串	与菜单元素对齐的触发器角落
overlay	false	布尔值	定义定位，启用后菜单将相对于触发器以绝对位置显示。默认为false，表示静态定位
triggerEvent	click	字符串	将显示动态定位菜单的触发器的事件名称

Primefaces的TieredMenu – 入门指南

Primefaces分层菜单实现

分层菜单由子菜单和菜单项组成，子菜单可以嵌套，每个嵌套的子菜单将显示在一个叠加层中。p:tieredMenu组件中的菜单项支持Ajax、非Ajax和导航操作，与之前使用的菜单项功能相同。以下示例展示了p:tieredMenu的最简单应用方式，包含了一组混合操作。index11.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:tieredMenu>
		<p:submenu label="Ajax菜单项">
			<p:menuitem value="Ajax操作" action="#{tieredMenuManagedBean.ajaxAction}" update="message"></p:menuitem>
		</p:submenu>
		<p:submenu label="非Ajax菜单项">
			<p:menuitem value="非Ajax操作" action="#{tieredMenuManagedBean.nonAjaxAction}"></p:menuitem>
		</p:submenu>
		<p:separator/>
		<p:submenu label="导航">
			<p:submenu label="Primefaces链接">
				<p:menuitem value="Prime" url="https://www.prime.com.tr"></p:menuitem>
				<p:menuitem value="Primefaces" url="https://www.primefaces.org"></p:menuitem>
			</p:submenu>
			<p:submenu label="Prime博客">
				<p:menuitem value="JournalDev" url="https://www.scdev.com"></p:menuitem>
			</p:submenu>
		</p:submenu>
	</p:tieredMenu>
</h:form>
</html>

层级菜单管理Bean.java

package com.Olivia.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class TieredMenuManagedBean {
	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax更新"));
		return "";
	}

	public String nonAjaxAction(){
		return "";
	}
}

Primefaces(PF)层叠菜单 – 自动展示

默认情况下，鼠标悬停在根菜单项上时会显示子菜单。将autoDisplay设置为false则需要点击根菜单项来显示子菜单。以下示例将设置p:tieredMenu组件的autoDisplay为false。

Primefaces层次菜单 – 叠加

与菜单组件一样，分级菜单也可以使用相同的方式进行叠加（请参见菜单叠加）。index11.xhtml。

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:tieredMenu autoDisplay="false" trigger="triggerBtn" overlay="true" my="left top" at="right top">
		<p:submenu label="Ajax菜单项">
			<p:menuitem value="Ajax操作" action="#{tieredMenuManagedBean.ajaxAction}" update="message"></p:menuitem>
		</p:submenu>
		<p:submenu label="非Ajax菜单项">
			<p:menuitem value="非Ajax操作" action="#{tieredMenuManagedBean.nonAjaxAction}"></p:menuitem>
		</p:submenu>
		<p:separator/>
		<p:submenu label="导航">
			<p:submenu label="Primefaces链接">
				<p:menuitem value="Prime" url="https://www.prime.com.tr"></p:menuitem>
				<p:menuitem value="Primefaces" url="https://www.primefaces.org"></p:menuitem>
			</p:submenu>
			<p:submenu label="Prime博客">
				<p:menuitem value="JournalDev" url="https://www.scdev.com"></p:menuitem>
			</p:submenu>
		</p:submenu>
	</p:tieredMenu>
	<p:commandButton value="显示菜单" id="triggerBtn"></p:commandButton>
</h:form>
</html>

Primefaces TieredMenu – 客户端API

你也可以通过使用Primefaces的客户端API来控制TieredMenu组件。

方法	参数	返回类型	描述
show()	–	void	显示叠加菜单。
hide()	–	void	隐藏叠加菜单。
align()	–	void	将叠加菜单与触发器对齐。

第11个索引网页。

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
	<script>
		function showMenu(){
			PF('tieredMenu').show();
		}
		function hideMenu(){
			PF('tieredMenu').hide();
		}
	</script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:tieredMenu autoDisplay="false" trigger="triggerBtn" overlay="true" my="left top" at="right top" widgetVar="tieredMenu">
		<p:submenu label="Ajax Menuitem">
			<p:menuitem value="Ajax Action" action="#{tieredMenuManagedBean.ajaxAction}" update="message"></p:menuitem>
		</p:submenu>
		<p:submenu label="Non Ajax Menuitem">
			<p:menuitem value="Non Ajax Action" action="#{tieredMenuManagedBean.nonAjaxAction}"></p:menuitem>
		</p:submenu>
		<p:separator/>
		<p:submenu label="Navigations">
			<p:submenu label="Primefaces links">
				<p:menuitem value="Prime" url="https://www.prime.com.tr"></p:menuitem>
				<p:menuitem value="Primefaces" url="https://www.primefaces.org"></p:menuitem>
			</p:submenu>
			<p:submenu label="Prime Blogs">
				<p:menuitem value="JournalDev" url="https://www.scdev.com"></p:menuitem>
			</p:submenu>
		</p:submenu>
	</p:tieredMenu>
	<p:commandButton value="Show Menu - Normal Trigger" id="triggerBtn"></p:commandButton>
	<p:commandButton value="Show Menu - JavaScript function" onclick="showMenu()"></p:commandButton>
	<p:commandButton value="Hide Menu - JavaScript function" onclick="hideMenu()"></p:commandButton>
</h:form>
</html>

Primefaces SlideMenu – 基本信息SlideMenu用于以滑动动画方式显示嵌套子菜单。

标签	slideMenu
组件类	org.primefaces.component.slidemenu.SlideMenu
组件类型	org.primefaces.component.SlideMenu
组件族	org.primefaces.component
渲染器类型	org.primefaces.component.SlideMenuRenderer
渲染器类	org.primefaces.component.slidemenu.SlideMenuRenderer

Primefaces SlideMenu – 属性

名称	默认值	类型	描述
id	null	String	组件的唯一标识符
rendered	true	Boolean	布尔值，用于指定组件是否渲染，设置为false时组件将不会被渲染。
binding	null	Object	映射到支持Bean中服务器端UIComponent实例的EL表达式
widgetVar	null	String	客户端小部件的名称。
model	null	MenuModel	用于编程式菜单的MenuModel实例。
style	null	String	组件的内联样式。
styleClass	null	String	组件的样式类。
backLabel	Back	String	返回链接的文本。
trigger	null	String	其triggerEvent将显示动态定位菜单的组件的ID。
my	null	String	菜单与触发元素对齐的角。
at	null	String	触发器与菜单元素对齐的角。
overlay	false	Boolean	定义定位，启用时菜单将相对于触发器以绝对位置显示。默认为false，表示静态定位。
triggerEvent	click	String	将显示动态定位菜单的触发器的事件名称。

Primefaces SlideMenu – 开始使用 – 遮罩和客户端API

PrimeFaces SlideMenu滑动菜单组件详解

SlideMenu 包含子菜单和菜单项，子菜单可以嵌套，每个嵌套的子菜单都会以幻灯片动画形式显示。SlideMenu 的功能与前一节讨论的 TieredMenu 中定义的功能类似。以下是 index12.xhtml 的代码示例：

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
	<script>
		function showMenu(){
			PF('tieredMenu').show();
		}
		function hideMenu(){
			PF('tieredMenu').hide();
		}
	</script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:slideMenu autoDisplay="false" trigger="triggerBtn" overlay="true" my="left top" at="right top" widgetVar="tieredMenu">
		<p:submenu label="Ajax菜单项">
			<p:menuitem value="Ajax操作" action="#{slideMenuManagedBean.ajaxAction}" update="message"></p:menuitem>
		</p:submenu>
		<p:submenu label="非Ajax菜单项">
			<p:menuitem value="非Ajax操作" action="#{slideMenuManagedBean.nonAjaxAction}"></p:menuitem>
		</p:submenu>
		<p:separator/>
		<p:submenu label="导航">
			<p:submenu label="Primefaces链接">
				<p:menuitem value="Prime" url="https://www.prime.com.tr"></p:menuitem>
				<p:menuitem value="Primefaces" url="https://www.primefaces.org"></p:menuitem>
			</p:submenu>
			<p:submenu label="Prime博客">
				<p:menuitem value="JournalDev" url="https://www.scdev.com"></p:menuitem>
			</p:submenu>
		</p:submenu>
	</p:slideMenu>
	<p:commandButton value="显示菜单 - 普通触发器" id="triggerBtn"></p:commandButton>
	<p:commandButton value="显示菜单 - JavaScript函数" onclick="showMenu()"></p:commandButton>
	<p:commandButton value="隐藏菜单 - JavaScript函数" onclick="hideMenu()"></p:commandButton>
</h:form>
</html>

以下是 SlideMenuManagedBean.java 的代码（中文释义：滑动菜单管理Bean.java）：

package com.Olivia.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class SlideMenuManagedBean {
	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax更新"));
		return "";
	}

	public String nonAjaxAction(){
		return "";
	}
}

总结

简言之，Primefaces为您提供了大量的UI菜单组件，这些组件为开发人员提供了丰富的选择，以满足不同用户需求。本教程旨在详细说明这些菜单类型的使用方法。欢迎在下方评论区留言，并下载本教程的源代码，为我们的项目做出贡献。

下载PrimeFaces菜单项目

#Java Web开发 #Primefaces教程 #Primefaces菜单 #前端UI组件 #菜单栏设计