Question

手风琴面板有问题。手风琴类似于此：

<p:accordionPanel>
    <p:tab title="tabTitle">
        <f:facet name="title">
            <!-- problematic button -->
            <p:commandButton value="button"/>
        </f:facet>
        <h:PanelGrid>
            <p>Accordion content</p>
        </h:panelGrdi>
    </p:tab>
</p:accordionPanel>

问题是 - 当我点击按钮时，整个Accordion Tab会崩溃。

我的问题是：如何防止手风琴折叠按钮点击？同时，当我点击标题但在按钮外面时，我希望Accordion崩溃。

我使用PrimeFaces 5.3和JSF 2.2.11

Answer 1

正如@JorgeCampos所建议的那样 - 我们可以使用event.stopPropagation()来防止事件从按钮到手风琴“冒泡”。发布的代码用法如下：

<p:accordionPanel>
    <p:tab title="tabTitle">
        <f:facet name="title">
            <p:commandButton value="button" onclick="event.stopPropagation();"/>
        </f:facet>
        <h:PanelGrid>
            <p>Accordion content</p>
        </h:panelGrdi>
    </p:tab>
</p:accordionPanel>

我们当然可以使用其他事件来做其他事情，或者使用actionListener从ManagedBean调用方法，使用update。例如

<p:commandButton
    value="button"
    onclick="event.stopPropagation();"
    oncomplete="PF('someDialog').show();" <!-- open dialog by js -->
    actionListener="#{someBean.someMethod}" <!-- call java method -->
    update="someComponent" <!-- update component -->
/>

Stoping事件传播不会干扰

Answer 2

取消绑定标题的所有事件，然后再次调用组件的init方法绑定它们。

<p:accordionPanel widgetVar="myAccordion">
  <p:tab title="tabTitle">
    <f:facet name="title">
        <!-- problematic button -->
        <p:commandButton value="button"
          onclick="PF('myAccordion').jq.find('.ui-accordion-header').unbind()" 
          oncomplete= "PF('myAccordion').init(PF('myAccordion').cfg)"/>
    </f:facet>
    <h:PanelGrid>
        <p>Accordion content</p>
    </h:panelGrdi>
  </p:tab>
</p:accordionPanel>

当我使用添加到标题的按钮时，如何防止折叠式面板折叠？

2 个答案: