Question

我正在使用PrimeFaces 5.1，在分割按钮中单击打开menuitem但是我需要相同的分割按钮需要悬停这是可能还是只有menuBar组件来显示此选项？

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

Answer 1

有可能。你可以在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：dataGrid（或p：dataTable，ui：repeat ...等）中有上面的代码，因此我也在那里使用 item.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>

PrimeFaces拆分按钮打开悬停

1 个答案: