Cách định vị hộp thoại p: trong Mặt Prime sau khi đổi kích thước

Question

Tôi có Mặt Thủ tướng p:dialog đã được thay đổi kích cỡ trong khi các thành phần mới được chèn khi mở (trạng thái 'hiển thị'). Tuy nhiên vị trí của nó không thay đổi và kích thước của nó đang tăng từ góc dưới bên trái cho đến cuối trang.

Tôi cần đặt lại vị trí mỗi lần tôi hiển thị động các thành phần mới. Có chức năng JavaScript nào tôi có thể gọi cho tiện ích con của nó để định vị lại không?

Tôi đang sử dụng PrimeFaces 3.5 với Mojarra 2.1.13.

Answer 1

Đây là một phương pháp mà nên làm việc trong trường hợp của bạn:

Bean mã:

@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; 
    } 
} 

Xem mã:

<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> 

Một phương pháp thứ hai cũng nên làm việc là bởi JavaScript:

.210

Để thêm trong <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> 

Xem mã:

<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> 

Lưu ý: Kể từ khi tôi không sử dụng PrimeFaces, tôi đã không kiểm tra mã này vì vậy tôi hy vọng nó hoạt động tốt, nhưng ý tưởng là ở đây!

Answer 2

Tôi đã có một tình huống tương tự với một TabView bên trong một hộp thoại. Nội dung TabView được tải động.

<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> 

Như bạn có thể thấy nó sẽ gọi hàm initPosition() với mọi thay đổi của Tab. Hàm này sẽ định vị lại hộp thoại của bạn. Bạn có thể sử dụng chức năng này trong một số trường hợp.

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