JSF Primefaces 在布局问题中使用菜单栏
Posted
技术标签:
【中文标题】JSF Primefaces 在布局问题中使用菜单栏【英文标题】：JSF Primefaces using menubar in Layout issue 【发布时间】：2013-04-01 05:18:28 【问题描述】：我的 JSF 页面使用布局时遇到问题。我试图将我的菜单栏定位在北定位布局单元的标题部分。它正确定位了菜单栏。但我需要向上或向下滚动布局单元才能单击菜单项。 有没有其他方法可以实现这一目标？使用素面
我的树节点也永远不可见。（查看注释代码）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>Committee and Meetings Management</title>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="true" closable="false" collapsible="true">
<h:form>
<p:menubar id="menubar">
<p:submenu label="Committee" >
<p:menuitem value="Compose" url="#"/>
<p:menuitem value="Create" url="#"/>
<p:menuitem value="Modify" url="#"/>
<p:menuitem value="Search" url="#"/>
<p:menuitem value="Delete" url="#"/>
</p:submenu>
<p:submenu label="Logout" />
</p:menubar>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="south" size="100" closable="true" collapsible="true">
<h:panelGrid id="bottom">
<h:outputText value="Best viewed with Google Chrome and Internet Explorer Version 6 or above"/>
<h:outputText value="Copyright © 2007 Newgen Software Technologies Limited. All rights reserved." />
</h:panelGrid>
</p:layoutUnit>
<p:layoutUnit position="west" size="175" header="Left" collapsible="true">
<!--<h:form id="form">
<p:tree value="#treeBean.root" var="node" id="tree">
<p:treeNode id="treeNode">
<h:outputText value="#node" id="lblNode"/>
</p:treeNode>
</p:tree>
</h:form> -->
</p:layoutUnit>
<p:layoutUnit position="center">
Welcome #login.userName
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
【问题讨论】：
【参考方案1】：你只需要覆盖默认的 CSS 布局：
.ui-layout-north
z-index:20 !important;
overflow:visible !important;
.ui-layout-north .ui-layout-unit-content
overflow:visible !important;
【讨论】：
完美！为什么这不是默认值？！ 仅供参考，用于 PrimeFaces 展示的“复杂布局”示例：code.google.com/p/primefaces/source/browse/examples/trunk/…以上是关于JSF Primefaces 在布局问题中使用菜单栏的主要内容，如果未能解决你的问题，请参考以下文章
JSF / PrimeFaces使用selectOneMenu将列表中的项目关联起来
JSF + PrimeFaces：`update` 属性不更新组件
如何从jsf / primefaces中的托管bean向页面添加组件[重复]
在 PrimeFaces 中添加 Angular Js - JSF