how to assign Richfaces Panel Bar with image as label

I am having a set of panelbar Items which need to have a image 开发者_JAVA技巧 as label and this image will change when onexpand and shrunck of the panel .

please help me in resolving this issue

---

I don't see any such options from here, But you can always play with raw HTML and set image there.

---

First, define two CSS classes: one for the normal state (I call it panelBarClosed), the second one for the opened state (panelBarOpened), and set the image as the background:

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

Now, on your <rich:panelBarItem>, set the first class:

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

I am not sure if this is enough or not (I am not able to test it right now).

If this still is not working, this component provides two other attributes that can be useful in your case: onenter and onleave. The first event is fired when you "enter" the panel bar item (i.e. you open it), the second one when you leave it. So the idea is to change the CSS class of the component on this events:

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

(again, I didn't test it, so maybe this solution should be corrected a little)