如何在使用按钮添加到标题时防止折叠手风琴板?
问题描述:
我遇到了手风琴面板问题。我已经手风琴与此类似:如何在使用按钮添加到标题时防止折叠手风琴板?
<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>
问题是 - 当我按一下按钮,整个手风琴Tab键将崩溃。
我的问题是:如何防止折叠按钮点击手风琴?同时我希望手风琴在我点击标题但在按钮外面时折叠。
我使用PrimeFaces 5.3和JSF 2.2.11
答
至于有人建议通过@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 -->
/>
回采事件传播不会干涉
答
解除绑定所有页眉的事件,然后将它们绑定再次调用您的组件的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>
+0
非常感谢您为这个解决方案,我已经测试它,它的工作原理,但我发现(根据评论下面的问题后)更简单的解决方案使用'event.stopPropagation() onclick'行动 –
这是有点复杂。这里的问题在于,手风琴有一个绑定到它的点击事件,并且手风琴内部的按钮继承了这种绑定,解决方案将成为技巧。我在这里看到两种选择,1 - 在手风琴外创建一个图层,将按钮放置在其上,并将其按照程序设置在手风琴上。 2-将代码更改为不传播按钮上的点击事件。 –
你想让它打开,即使你点击另一个元素? –
@JorgeCampos - 你知道吗?我怎么才能达到不传播click事件的效果? –