jsf-2 - 如何放置p :dialog in Prime Faces after its resizing

Question

我有一个Prime Faces p:dialog，在打开时插入新组件时已调整其大小(“显示”状态)。但是，它的位置没有改变，并且它的大小从左下角到页面底部逐渐增大。

每当我动态渲染新组件时，都需要重新定位它。我可以调用其小部件来重新定位的任何JavaScript函数吗？

我在Mojarra 2.1.13中使用了PrimeFaces 3.5。

Answer 1

这是一种适用于您的情况的方法:

Bean代码:

@ManagedBean
@ViewScoped
public class Bean
{
    private boolean visible;

    public void setVisible(boolean visible)
    {
         this.visible = visible;
    }

    public boolean getVisible()
    {
        return this.visible;
    }

    public void onBeforeShowDialog(AjaxBehaviorEvent event)
    {
        visible = true;
    }

    public void onBeforeHideDialog(AjaxBehaviorEvent event)
    {
        visible = false;
    }
}

查看代码:

<h:commandButton value="Show dialog">
    <f:ajax listener="#{bean.onBeforeShowDialog}" render="dialog" />
</h:commandButton>

<p:dialog id="dialog" visible="#{bean.visible}">
    content

    <h:commandButton value="Hide dialog">
        <f:ajax listener="#{bean.onBeforeHideDialog}" render="dialog" />
    </h:commandButton>
</p:dialog>

另一个可行的方法是使用JavaScript:

要添加 <h:head />:

<h:outputScript library="primefaces" name="jquery/jquery.js" />

<script>
    function centerAndShowDialog(dialog)
    {
        $(dialog).css("top",Math.max(0,(($(window).height() - $(dialog).outerHeight()) / 2) + $(window).scrollTop()) + "px");
        $(dialog).css("left",Math.max(0, (($(window).width() - $(dialog).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
        dialog.show();
    }
</script>

查看代码:

<p:commandButton id="basic" value="Show Dialog" onclick="centerAndShowDialog(dlg);" type="button" />

<p:dialog id="dialog" header="Dynamic Dialog" widgetVar="dlg" dynamic="true">
    Content
</p:dialog>

注意:由于我没有使用PrimeFaces，所以我没有测试过此代码，因此希望它能正常工作，但是这个主意在这里!