Css 左侧菜单，JSF richfaces中的水平选项卡式UI_Css_Jsf_Richfaces

Css 左侧菜单，JSF richfaces中的水平选项卡式UI

css jsf

Css 左侧菜单，JSF richfaces中的水平选项卡式UI,css,jsf,richfaces,Css,Jsf,Richfaces,我正在尝试创建一个简单的项目布局，在页面顶部带有徽标和水平选项卡。一些菜单在左手边。左侧的顶部选项卡和菜单都应刷新中心的内容。我用ui:compositiontemplate/richtabedpanel试过这个。还没有运气。这可能是许多项目中遵循的常见结构。可能这可以在CSS中轻松完成，而无需richfaces。如果有人能发布此代码，我将不胜感激这是一个通用的项目布局，应该适合您的需要（topmenu、left menu、content in center和footer）和facelets

我正在尝试创建一个简单的项目布局，在页面顶部带有徽标和水平选项卡。一些菜单在左手边。左侧的顶部选项卡和菜单都应刷新中心的内容。我用ui:compositiontemplate/richtabedpanel试过这个。还没有运气。这可能是许多项目中遵循的常见结构。可能这可以在CSS中轻松完成，而无需richfaces。如果有人能发布此代码，我将不胜感激

这是一个通用的项目布局，应该适合您的需要（

topmenu、left menu、content in center和footer

）和facelets

MainLayout.xhtml
（请记住在开头添加doctype）

然后，如果你想要简单的html和css菜单，看看它是一个很好的起点，有一个简单的列表和使用层叠样式表，你可以创建水平/垂直工具栏

但是，如果您想使用richfaces菜单工具栏，您可以使用它

最后，为了刷新页面的某些部分，您需要一个ajax组件（例如）并使用de-attribute

reRender

（定义ajax请求后应重新提交的JSF组件的id）

<?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>

<?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>