根据内容动态调整PrimeFaces中的中心布局单元

Question

我有一个带有"标题","页脚","侧边菜单"和"内容区域"的页面.

我正在尝试使用PrimeFaces布局来安排它们,如下所示:

标题 - >北

页脚 - >南

侧面菜单 - >东

内容区 - >中心

乍一看,它工作正常.

但是,我的侧边菜单包含将更改中心区域内容的链接.目前,当我单击其中一个链接时,如果新内容的长度大于为中心layoutunit定义的长度,则中心区域的内容将发生变化,并且中心区域将出现垂直滚动条.

我正在寻找的行为是动态调整中心区域的大小,按下页脚(南layoutunit)并显示整个页面的滚动条.

我正在使用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;
}

中心组件以HORIZONTALLY为中心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;
}

North组件就像页脚一样,但它当然位于顶部top:0px.

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

现在页面看起来像...... 类似于p:layout fullPage="true".你当然应该定制它的looknfeel,也许你可以看看更新的CSS属性,如box-shadow(对于北面板)等.因此,你的要求:

我正在寻找的行为是动态调整中心区域的大小,按下页脚(南layoutunit)并显示整个页面的滚动条.

我已经准备了一个内容是最初从中央面板溢出,然后有上说某物页脚的按钮.关于魔术,它调用makeMe()js函数,它执行:

function makeMe() {
    $(".center").css({
        "height":"auto",
        "word-wrap": "break-word"
    });
    $(".footer").css({
        "position":"relative"
    });
}

只需扩展其p:panel高度,现在如果它有100个内容项,它将为所有内容项指南针.通过position:relative,我们说脚注"不要留在那里只是坚持到中心组件的底部."

这是它最初的样子:

如果您通过ajax加载内容,则最初不会有滚动条.我只是将很多文本复制到其中,这就是为什么最初有一个滚动条.

点击按钮后:

如果有问题就警告我,希望有所帮助.