如何在调整大小后在 Primefaces 中定位：对话框答案

【问题标题】：How to position a p:dialog in Prime Faces after its resizing如何在调整大小后在 Primefaces 中定位：对话框
【发布时间】：2013-05-10 16:42:15
【问题描述】：

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

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

我正在使用 PrimeFaces 3.5 和 Mojarra 2.1.13。

【问题讨论】：

如果你渲染完整的 p:dialog，会有什么不同吗？逻辑上它应该重新计算它的位置。
我在命令按钮的update 属性中添加了dialogUpload，上传后它完美地重新定位了对话框窗口。但是，更新操作正在关闭它，每次调用此命令按钮时我都必须再次打开对话框。

标签： jsf-2 primefaces dialog

【解决方案1】：

我在对话框中使用 TabView 时遇到了类似的情况。 TabView 内容是动态加载的。

<p:dialog widgetVar="dialogWidgetVar">
    <p:tabView value="#{tabBean.tabs}" var="tabsVar"
            onTabShow="PF('dialogWidgetVar').initPosition();" dynamic="true">
        <p:tab id="Tab#{tabsVar.id}" title="#{tabsVar.name}">
            ...
        </p:tab>
    </p:tabView>
</p:dialog>

如您所见，它会在每次更改 Tab 时调用函数 initPosition()。此功能将重新定位您的对话框。您可以在多种情况下使用此功能。

http://forum.primefaces.org/viewtopic.php?f=3&t=16893

【讨论】：

【解决方案2】：

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

豆码：

@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，所以我没有测试过这段代码，所以我希望它能正常工作，但想法就在这里！

【讨论】：

使用dialog.jq代替$(dialog)，例如：dialog.jq.css("top", ...);