srcmini本文概述
它是一个水平导航组件, 提供菜单选项。它用于收集菜单并将其显示在组织行中。
我们可以通过在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="Text" />
<p:menuitem value="Other" />
</p:submenu>
<p:menuitem value="Open" />
<p:separator />
<p:menuitem value="Exit" />
</p:submenu>
<p:submenu label="Edit" icon="ui-icon-pencil">
<p:menuitem value="Undo" icon="ui-icon-arrowreturnthick-1-w" />
<p:menuitem value="Redo" icon="ui-icon-arrowreturnthick-1-e" />
</p:submenu>
<p:submenu label="Help" icon="ui-icon-help">
<p:menuitem value="help" icon="ui-icon-help" />
</p:submenu>
</p:menubar>
</h:form>
</h:body>
</html>输出
评论前必须登录！
注册