8

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

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

我正在使用 PrimeFaces 3.5 和 Mojarra 2.1.13。

4

2 回答 2

18

我在对话框中使用 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()。此功能将重新定位您的对话框。您可以在多种情况下使用此功能。

  1. http://forum.primefaces.org/viewtopic.php?f=3&t=16893
于 2014-08-12T21:46:46.503 回答
6

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

豆代码：

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

于 2013-05-16T17:42:35.520 回答