PrimeFaces菜单栏实例 _菜单栏

本文概述

MenuBar属性
例子

它是一个水平导航组件, 提供菜单选项。它用于收集菜单并将其显示在组织行中。
我们可以通过在JSF应用程序中使用< p：menubar> 组件来创建菜单栏。下表列出了一些重要的属性。
MenuBar属性

Attribute	默认值	Type	Description
model	null	MenuModel	它用于以编程方式创建菜单。
style	null	String	用于菜单栏的内联样式。
styleClass	null	String	它是菜单栏的样式类。
autoDisplay	false	Boolean	它用于定义子菜单的第一级是否在鼠标悬停时显示。
tabindex	0	String	用于按跳位顺序设置元素的位置。
toggleEvent	over	String	切换子菜单的事件。

例子在下面的示例中, 我们正在实现< p：menubar> 组件。本示例包含以下文件。
JSF文件
// menuBar.xhtml

< ?xml version='1.0' encoding='UTF-8' ?> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://xmlns.jcp.org/jsf/html"xmlns:p="http://primefaces.org/ui"xmlns:f="http://xmlns.jcp.org/jsf/core"> < h:head> < title> MenuBar< /title> < /h:head> < h:body> < h:form> < p:menubar> < p:submenu label="File" icon="ui-icon-document"> < p:submenu label="New" icon="ui-icon-contact"> < p:menuitem value="http://www.srcmini.com/Text" /> < p:menuitem value="http://www.srcmini.com/Other" /> < /p:submenu> < p:menuitem value="http://www.srcmini.com/Open" /> < p:separator /> < p:menuitem value="http://www.srcmini.com/Exit" /> < /p:submenu> < p:submenu label="Edit" icon="ui-icon-pencil"> < p:menuitem value="http://www.srcmini.com/Undo" icon="ui-icon-arrowreturnthick-1-w" /> < p:menuitem value="http://www.srcmini.com/Redo" icon="ui-icon-arrowreturnthick-1-e" /> < /p:submenu> < p:submenu label="Help" icon="ui-icon-help"> < p:menuitem value="http://www.srcmini.com/help" icon="ui-icon-help" /> < /p:submenu> < /p:menubar> < /h:form> < /h:body> < /html>

【PrimeFaces菜单栏实例】输出