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

Question

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

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

我决定用这样的可切换面板替换标题面板

<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 的垂直位置永远不会改变！

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

问题：如何更新 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>

为了让这段代码工作，我有

1. 添加了“切换”事件来定位 ContentPanel。
2. 在页面加载时添加了一些 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() 时大小参数尚未更改。所以主动函数是使用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 事件在 .ready() 函数中的 </body> 元素之前初始化。

<script type="text/javascript">

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

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

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

</script>

现在，标题和内容面板已正确显示

1. 当我第一次显示这个页面时
2. 当我改变窗口大小时
3. 当我点击减号按钮折叠标题面板时
4. 单击 pn 加号按钮展开标题面板时的列表项

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