根据内容动态调整 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 位于最左端和最西端；反之亦然。

.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 加载内容，最初不会有滚动条。我只是将大量文本复制到其中，这就是最初有滚动条的原因。

点击按钮后：

如果有问题，请警告我，希望对您有所帮助。