个性化阅读
专注于IT技术分析

PrimeFaces菜单栏实例

本文概述

它是一个水平导航组件, 提供菜单选项。它用于收集菜单并将其显示在组织行中。

我们可以通过在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>

输出

PrimeFaces菜单栏1
PrimeFaces菜单栏2
赞(0) 打赏
未经允许不得转载:srcmini » PrimeFaces菜单栏实例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏