Question

我有一个Prime Faces p:dialog，在打开时插入新组件时会调整大小（'show'状态）。但是它的位置没有变化，它的大小从左下角到页面底部都在增加。

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

我正在使用PrimeFaces 3.5和Mojarra 2.1.13。

Answer 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

Answer 2

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

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，我没有测试过这段代码，所以我希望它运行良好，但这个想法就在这里！

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

2 个答案: