PrimeFaces拆分按鈕打開懸停

我正在使用PrimeFaces 5.1，在拆分按鈕單擊打開menuitem，但我需要相同的拆分按鈕需要懸停這是可能的或只有menuBar組件顯示此選項？PrimeFaces拆分按鈕打開懸停

<p:splitButton value="Save" actionListener="#{buttonView.save}" update="messages" icon="ui-icon-disk"> 
<p:menuitem value="Update" actionListener="#{buttonView.update}" update="messages" icon="ui-icon-arrowrefresh-1-w" /> 
<p:menuitem value="Delete" actionListener="#{buttonView.delete}" ajax="false" icon="ui-icon-close" /> 
<p:separator /> 
<p:menuitem value="Homepage" url="main.xhl" icon="ui-icon-extlink" /> 
</p:splitButton>

來源

2016-03-18 Karthik

當然，看組件的JavaScript源，並添加一個懸停事件處理程序就像點擊處理器 – Kukeltje

這是可能的。您可以使用jQuery的幫助，讓這樣的：

<p:splitButton value="Action" action="#{bean.doMainAction}" widgetVar="itemBtn_#{item.id}" menuStyleClass="hoverOverlay"> 
    <p:menuitem value="Sub action 1" action="#{bean.doSubAction1}" /> 
</p:splitButton> 
<script type="text/javascript"> 
    $(window).load(function() { 
     PF('itemBtn_#{item.id}').getJQ().on("mouseenter", function() { 
      PF('itemBtn_#{item.id}').menu.show(); 
     }); 
     PF('itemBtn_#{item.id}').getJQ().on("mouseleave", function() { 
      PF('itemBtn_#{item.id}').menu.hide(); 
     }); 
    }); 
</script>

我上面的代碼中的號碼：的數據網格（或p：dataTable中，如下所示：重複...等），所以我使用也有項目。 ID。否則你不需要它。也有顯示和隱藏的PrimeFaces提供的操作：

PF('itemBtn_#{item.id}').show(); 
PF('itemBtn_#{item.id}').hide();

不過，由於他們使用的效果和顯示沒有使用這些/隱藏覆蓋不工作好他們，因爲效果需要一段時間才能完成。

以下代碼用於懸停疊加菜單（即使離開拆分按鈕本身後仍保持打開狀態）。它全局綁定到所有覆蓋菜單，其類別爲hoverOverlay。

<script type="text/javascript"> 
    $(window).load(function() { 
     $("body").on("mouseenter", ".hoverOverlay", function() { 
      $(this).show(); 
     }); 
     $("body").on("mouseleave", ".hoverOverlay", function() { 
      $(this).hide(); 
     }); 
    }); 
</script>

你可以把它綁定到一個按鈕而不代替使用自定義hoverOverlay類是這樣的：

<script type="text/javascript"> 
    $(window).load(function() { 
     PF('itemBtn_#{item.id}').menu.on("mouseenter", ".hoverOverlay", function() { 
      PF('itemBtn_#{item.id}').menu.show(); 
     }); 
     PF('itemBtn_#{item.id}').menu.on("mouseleave", ".hoverOverlay", function() { 
      PF('itemBtn_#{item.id}').menu.hide(); 
     }); 
    }); 
</script>

來源

2016-04-21 11:20:23 matof

PrimeFaces拆分按鈕打開懸停

回答

相關問題