Primefaces：overlayPanel的hideEvent應取決於showEvent

我們的代碼生成多個<div>框（使用自定義標籤own：resourceDiagramElement）。現在，我們試圖覆蓋面板結合而<div>框與下列二行爲：Primefaces：overlayPanel的hideEvent應取決於showEvent

1）如果在< DIV>箱/元素的鼠標移動OverlayPanel應該表現出一些細節的相關信息有關盒/元件。如果鼠標移出< div>框，則應隱藏OverlayPanel。 2.）如果你點擊一個< div> box /元素，應該顯示OverplayPanel並保持打開，直到你再次點擊一個< div> box /元素。就像你點擊了< div>框，如果鼠標移出< div>框範圍，則不會發生任何事情。

基本上源代碼如下這樣：

<c:forEach items="#{resourceStateDiagramViewBean.graphicalResources}" var="resource1"> 

<own:resourceStateDiagramElement id="#{resource1.id}" 
onClick="alert('alert')" top="#{resource1.top}" 
left="#{resource1.left}" width="#{resource1.width}" 
height="#{resource1.height}" styleClass="#{resource1.styleClass}" 
showText="#{resourceStateDiagramViewBean.showText}" /> 
... 
<p:overlayPanel id="panel_#{resource1.id}" for="#{resource1.id}" 
showEvent="mouseover OR mouseclick" hideEvent="mouseleave OR mouseclick" > 
... 
</c:forEach>

我們的自定義標籤<自己：resourceStateDiagramElement>生成HTML代碼，如：

<div id="facility_01" class="resource-element-default" style="top:1%; 
left:2%; width:5%; height:2%;">

這意味着hideEvent應取決於通道/事件面板顯示... 我們嘗試綁定和解除綁定div>元素上的事件，但看起來primesfaces事件會覆蓋此自己的綁定。

我們如何才能做到這一點？

來源

2013-08-27 user2718618

我找到了一個工作解決方案。我用null定義了showEvent & hideEvent。 ... ... ... bean方法GetJavascriptsForOverlayPanel產生以下的Java Script代碼：

<script id="facility_01_script" type="text/javascript"> 


    var facility_01_useMouseLeaveEnter_Event = true; 
    var facility_02_useMouseLeaveEnter_Event = true; 
    var facility_0X_useMouseLeaveEnter_Event = true; 
    ... 

    window.onload = function() { 
     $("#facility_01").bind('click',function(){ 
      if (facility_01_useMouseLeaveEnter_Event) { 
       widget_panel_facility_01.show(); 
       facility_01_useMouseLeaveEnter_Event = false; 
      }else { 
       widget_panel_facility_01.hide(); 
       facility_01_useMouseLeaveEnter_Event = true; 
     }}); 

     $("#facility_01").bind('mouseenter',function(){ 
      if (facility_01_useMouseLeaveEnter_Event) { 
       widget_panel_facility_01.show(); 
     }}); 

     $("#facility_01").bind('mouseleave',function(){ 
      if (facility_01_useMouseLeaveEnter_Event) { 
       widget_panel_facility_01.hide(); 
     }}); 


     $("#facility_02").bind('click',function(){ 
      ... 
     }}); 

     $("#facility_02").bind('mouseenter',function(){ 
      ... 
     }}); 

     $("#facility_02").bind('mouseleave',function(){ 
      ... 
     }});   

     ... 
     < code for facility_0X element > 

    }; 
</script>

有了這個，我得到了可接受的解決方案。不幸的是，不能同時打開兩個OverlayPanels。只要您嘗試打開第二個面板。第一個將被關閉。可能這是一個OverplayPanel的默認行爲？

來源

2013-08-30 13:22:02 user2718618

Primefaces：overlayPanel的hideEvent應取決於showEvent

回答

相關問題