如何在調整大小後在Prime Faces中放置p：對話框

Question

我有一個在打開時插入新組件（'show'狀態）時已調整大小的Prime Faces p:dialog。然而，它的位置並沒有改變，它的大小從左下角直到頁底。

我每次動態呈現新組件時都需要重新定位它。有沒有JavaScript函數可以調用它的小部件來重新定位？

我使用PrimeFaces 3.5和Mojarra 2.1.13。

Answer 1

這是應該在你的情況下，工作的方法：

豆代碼：

@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，我沒有測試這個代碼，所以我希望它工作得很好，但想法就在這裏！

Answer 2

我有一個類似的情況與對話框中的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