如何使用图像作为标签分配Richfaces面板栏

Question

我有一组面板栏项目，这些项目需要有一个图像作为标签，并且在面板展开和收缩时，此图像会更改。

请帮助我解决这个问题

Answer 1

我从这里看不到任何此类选项，但是您始终可以使用原始HTML并在其中设置图像。

Answer 2

首先，定义两个CSS类：一个用于正常状态（我称之为panelBarClosed ），第二个用于打开状态（ panelBarOpened ），并将图像设置为背景 ：

.panelBarClosed {
  background: url('/path/to/images/closed.png');
}
.panelBarOpened {
  background: url('/path/to/images/opened.png');
}

现在，在您的<rich:panelBarItem> ，设置第一个类：

<rich:panelBarItem headerClass="panelBarClosed" headerClassActive="panelBarOpened">
    ...
</rich:panelBarItem>

我不确定这是否足够（我现在无法对其进行测试）。

如果仍然无法正常工作，则此组件将提供另外两个对您有用的属性： onenter和onleave 。 当您“输入”面板栏项目（即，将其打开）时，将触发第一个事件，当您离开它时，将触发第二个事件。 因此，想法是在此事件上更改组件的CSS类：

<rich:panelBarItem ...
    onenter="jQuery(this).removeClass('panelBarClosed').addClass('panelBarOpened');"
    onleave="jQuery(this).removeClass('panelBarOpened').addClass('panelBarClosed');">
    ...
</rich:panelBarItem>

（再次，我没有测试它，所以也许这个解决方案应该更正一点）