1

我有一个带有“页眉”、“页脚”、“侧边菜单”和“内容区”的页面。

我正在尝试使用 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>

谢谢你的帮助

4

1 回答 1

6

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

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

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

现在页面看起来像。类似于p:layout fullPage="true"。您当然应该自定义它的外观，也许您可​​以查看更新的 CSS 属性，例如box-shadow（用于北面板）等。因此关于您的要求：

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

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

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

只需扩展p:panel的高度，现在如果它有 100 个内容项，它将包含所有内容项。并且通过position:relative，我们对页脚说“不要呆在那里，只是粘在中心组件的底部。”

这是它最初的样子：

在此处输入图像描述

如果您通过 ajax 加载内容，最初不会有滚动条。我只是将大量文本复制到其中，这就是最初有滚动条的原因。

点击按钮后：

在此处输入图像描述

如果有问题只是警告我，希望有帮助。

于 2013-04-28T22:42:52.587 回答