我正尝试在页面顶部创建带有徽标和水平选项卡的简单项目布局。一些菜单在左侧。顶部的标签和左侧的菜单都应该刷新中间的内容。我试着用ui:构图模板/丰富的tabbedpanel。没有运气。这可能是大量项目中常见的结构。可能这可以很容易地在没有richfaces的CSS中完成。如果有人能为此发布代码,将不胜感激。左侧菜单,JSF Richfaces中的水平选项卡式UI
0
A
回答
0
这是通用的项目布局,应该符合您的需求(topmenu, left menu, content in center and footer
)和facelets。
MainLayout.xhtml
(remeber在开始时添加的doctype)
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view contentType="text/html" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<ui:insert name="headStyles" />
<title>
<ui:insert name="pageTitle" />
</title>
<ui:insert name="htmlHeader" />
</head>
<body>
<div id="pageContainer" >
<div id="headerContainer" class="topMenu">
<ui:insert name="header" />
</div>
<div id="mainContainer" >
<ui:insert name="main"/>
</div>
<div id="footerContainer" >
<ui:insert name="footer" />
</div>
</div>
</body>
</html>
Two ColummnsLayout.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
template="mainLayout.xhtml">
<ui:define name="headStyles">
<!-- define your styles HERE -->
</ui:define>
<ui:define name="pageTitle">
<!-- define your title HERE -->
</ui:define>
<ui:define name="htmlHeader">
<!-- define your header HERE -->
</ui:define>
<ui:define name="menu">
<!-- define your richfaces top Menu HERE -->
<ui:define>
<ui:define name="main">
<div id="menuContainer" class="leftColumn">
<ui:insert name="leftMenu"/>
</div>
<div id="contentContainer" class="contentColumn">
<ui:insert name="contentMain"/>
</div>
</ui:define>
</ui:composition>
然后如果你想用简单的HTML和CSS菜单在ListaMatic看看这是很好的起点,用一个简单的列表和使用级联样式表,您可以创建水平/垂直工具栏。
但是,如果你想使用richfaces菜单工具栏,你有examples here。
最后你页面的清爽部分,那么你需要一个Ajax组件(例如a4j:support),并使用去属性reRender
(定义应该Ajax请求后重新呈现JSF组件(S)的ID(S))
相关问题
- 1. HTML&CSS左侧和右侧项目的水平菜单
- 2. Angular UI-Router多菜单(顶部水平和左侧垂直菜单)
- 3. JSF的facelet水平菜单
- 4. 水平菜单选项卡中的不同宽度间距
- 5. JSF(RichFaces) - ui:包含丰富内部不工作:选项卡
- 6. JQuery UI:水平菜单
- 7. 水平菜单项与WPF中的水平子菜单
- 8. 水平下拉选择选项菜单
- 9. 带左侧标志的水平液体导航菜单
- 10. 侧滑动菜单选项卡
- 11. 在单击水平主菜单时在页面左侧显示子菜单
- 12. 如何使用animate()滑动(左侧或右侧)jQuery选项卡导航菜单?
- 13. Android选项菜单水平分隔线
- 14. 将ui-grid中的水平滚动条更改为左侧?
- 15. 水平Nav选项卡Dropdown
- 16. 材料的UI水平的菜单
- 17. 水平视图中的ActionBar选项卡样式
- 18. 水平显示菜单项
- 19. 水平排列jQuery UI菜单组件中的项目
- 20. 如何隐藏XAML菜单中菜单项左侧的空间?
- 21. Flexbox选项卡式菜单:右侧下拉切断屏幕
- 22. CSS - 如何水平显示子菜单选项,同时保持水平主菜单选项的间距
- 23. 如何对齐css中水平ul菜单中所有选项卡的高度
- 24. 如何禁用Richfaces中的选项卡
- 25. 手风琴中的选项卡左侧和内容右侧
- 26. JQuery-UI Tabs的样式选项卡
- 27. 水平菜单CSS材质UI ReactJS
- 28. 需要适合水平空间的JQuery UI自定义选项卡
- 29. 居中水平子菜单的CSS水平菜单
- 30. 水平菜单