根据内容以字母顺序调整PrimeFaces中的中央布局单元

Question

我有一个包含“标题”，“页脚”，“侧边菜单”和“内容区域”的页面。

我试图使用PrimeFaces布局如下安排他们：

页眉 - >北

页脚 - >南

侧面菜单 - >东

内容区域 - >中心

乍一看，它工作正常。

但是，我的侧面菜单包含的链接将改变中心区域的内容。目前，当我单击其中一个链接时，如果新内容的长度大于为中央布局单元定义的长度，则中心区域的内容将会改变，并且中心区域将出现一个垂直滚动条。

我正在寻找的行为是动态调整中心区域的大小，向下推动页脚（南布局单元）并显示整个页面的滚动条。

我使用PrimeFaces布局是否正确？我应该使用别的东西吗？

这里是我的 “身体” 代码：

<h:body> 

<p:layout fullPage="true"> 

    <p:layoutUnit position="north" size="100"> 
     <ui:include src="header.xhtml" /> 
    </p:layoutUnit> 

    <p:layoutUnit position="south" size="200"> 
     <ui:include src="footer.xhtml" /> 
    </p:layoutUnit> 

    <p:layoutUnit position="east" size="260"> 
     <ui:include src="side-menu.xhtml" /> 
    </p:layoutUnit> 

    <p:layoutUnit position="center"> 
     <ui:insert name="body-content"> 
     </ui:insert> 
    </p:layoutUnit> 
</p:layout> 
</h:body> 

感谢您的帮助

Answer 1

它是正确的，我使用PrimeFaces布局？我应该使用别的东西吗？

答：这要看情况。我认为，p:layout fullPage="true"是一个组件，他们希望创建一个超快速，简单的页面，并且没有足够的时间来处理视图层。如果陈列柜的例子几乎没有相应的要求，那么没有理由放弃它。

但是，如果你想定制或改变它的行为或它的功能停止和滚动你自己的。

我准备了一个适合您的要求的开球示例，正如我所说，它并不完整，但它可以激励您。让我们从组件开始吧。

<h:form> 
    <p:fieldset legend="West" styleClass="west"> 

    </p:fieldset> 
    <p:panel styleClass="north"> 

    </p:panel> 
    <p:fieldset legend="East" styleClass="east"> 

    </p:fieldset> 
    <p:fieldset legend="Center" styleClass="center"> 

    </p:fieldset> 

    <p:panel styleClass="footer"> 
     <p:commandButton onclick="makeMe();" value="SeeTheMagic"></p:commandButton> 
    </p:panel> 
</h:form> 

可以看出，这些是基本的PrimeFaces组件，在这里指向CSS本身。 （我使用p:fieldset，因为我喜欢它的样子，你可以用p:panel代替）。

让我们从footer开始。有一件事值得提及，它的位置，我们只是通过bottom:0px和position:absolute将它放置在页面底部。

.footer{ 
    width:100%; 
    height:30px; 
    padding:30px; 
    background: #000007; 
    clear: both; 
    position: absolute; 
    bottom: 0px; 
} 

中心组件是水平居中的margin 0 auto。还有其他方法可以肯定。此外，如果您想垂直居中，通过边距很容易。而margin-top:70px只是防止与北方面板重叠。

.center{ 
    margin: 0 auto; 
    width:650px; 
    height:200px; 
    margin-top: 70px; 
    background-color: #f7f7f7; 
} 

东位于最左侧和西侧;反之亦然。

.east{ 
    width:200px; 
    height:400px; 
    position: absolute; 
    margin-top: 30px; 
    right: 0px; 
    background-color: #f7f7f7; 
} 

.west{ 
    width:200px; 
    height:400px; 
    margin-top: 30px; 
    position: absolute; 
    left: 0px; 
    background-color: #f7f7f7; 
} 

北部组件就像页脚，但它在顶部当然通过top:0px。

.north { 
    background-color: black; 
    position: absolute; 
    top:0px; 
    width: 100%; 
    height: 40px; 
} 

现在页面看起来像某事物。类似于p:layout fullPage="true"。应进行自定义的，当然looknfeel，也许你可以看看到新的CSS属性，如box-shadow（北面板）或等。因此你的要求：

我在寻找的行为是调整中心区域动态显示， 按下页脚（南布局单元）并显示整个页面的滚动条 。

我已经准备了一个内容，最初从中心面板溢出，然后在页脚上有一个按钮说明某事。关于魔术和它调用makeMe() JS函数的作用：

只是展开p:panel的高度，现在，如果有，将指南针所有这些内容100项。并且通过position:relative，我们要求页脚“不要停留在那里只是粘在中心组件的底部。”

这是它的外观开始：

如果您加载内容通过AJAX不会有滚动条开始。我只是将很多文本复制到它中，这就是为什么最初有一个滚动条。

点击按钮后：

是否会有问题，只是提醒我，希望帮助。