Question

我使用Primefaces 6.2 <p:layout>显示FIX标头（始终显示在页面顶部）。

但是标题有时过高，我需要动态减小它。

我决定将Header面板替换为这样的可切换面板

<p:layout id="PageLayout" fullPage="true">

    <p:layoutUnit position="north">
        <p:panel id="TitlePanel" toggleable="true" header="Title">
            <p:ajax event="toggle" update=":PageLayout"/>
        </panel>    
        ... others panels with context, status, date, time, etc ...
    </p:layoutUnit>

    <p:layoutUnit id="ContentBloc" position="center">
        ... web page with specific data
    </p:layoutUnit>

</p:layout>

除了ContentBloc的位置从未更新过之外，此方法效果很好。

当我单击切换按钮时，标题面板的内容被隐藏，但是ContentBloc的垂直位置从未改变！

我在update元素中使用了<p:ajax>属性，但这没有效果。

问题：我该如何更新ContentBloc位置？

备注：在Chrome上，如果单击切换按钮后，我加载了开发者控制台，则显示立即正确！

备注：如果在最大化我的Chrome Windows中，显示也正确！

Answer 1

经过大量搜索，我发现了以下棘手的解决方案

<div id="PageHeader" style="position:absolute; left:0; top:0; width:100%;"> 
    <p:panel id="TitlePanel" toggleable="true">
        <p:ajax event="toggle" oncomplete="toggleTitlePanel()"/>
        <f:facet name="header">
            <p:outputLabel value="#{pageTitle}" escape="false" style="font-size:200%;"/>
        </f:facet>
        ... others panels with context, status, date, time, etc ...
    </p:panel>
</div>

<div id="ContentPanel" style="position:fixed;
                              left:0;
                              overflow-x:auto;
                              overflow-y:auto;
                             ">
    ... web page with specific data
</div>

要使此代码有效，我有

添加了“ toggle”事件来定位ContentPanel。
在页面加载时添加了一些JQuery事件

链接到toggle事件的javascript代码如下

function fixHeaderHeight()
    {
    var iHeight = document.getElementById("PageHeader").offsetHeight;
    document.getElementById("ContentPanel").style.top = iHeight + "px";
    }

function toggleTitlePanel()
    {
    setTimeout(function(){ fixHeaderHeight(); }, 500);
    }

不能调用fixHeaderHeight()函数，因为调用toggleTitlePanel()时size参数没有改变。因此，可以使用setTimeout()函数间接调用活动函数。

要在ContentPanel首次显示时正确定位，并且在更改，最小化和最大化屏幕尺寸时，我已经添加了一些JavaScript代码。

<script>
    function setContentTopPosition(div)
        {
        var iHeight = document.getElementById("PageHeader").style.height;
        div.style.top = iHeight;
        }

    function onLoadPage()
        {
        fixHeaderHeight();
        }

    function onResizeWindow()
        {
        fixHeaderHeight();
        }
</script>

JQuery事件在</body>函数中的.ready()元素之前初始化。

<script type="text/javascript">

    jQuery(document).ready(function()
        {
        onLoadPage();

        jQuery("#PageHeader").resize(function()
            {
            onResizeWindow();
            });
        });

    jQuery(window).resize(function()
        {
        onResizeWindow();
        });

</script>

现在，正确显示了“标题”和“内容”面板

当我第一次显示此页面时
当我更改窗口大小时
当我单击减号按钮以折叠“页眉”面板时
单击pn PLUS按钮以展开“页眉”面板时列出项目

我只希望这种解决方案对其他人有帮助。

如何使用JSF和Primefaces显示HEIGHT变量FIX标题面板？

1 个答案: