5

I am using primefaces selectOneButton. I want to make some buttons in that selectOneButton differently styled from others depending upon some backing bean value. Forexample text of 3 buttons in selectOneButton needs to be bold and that of remaining needs to be normal.

Is it possible?

Primefaces 3.2

4

4 回答 4

9

This is how i made it:

Add a styleClass to the selectOneButton:

<p:selectOneButton styleClass="yourStyleClass" value="#{yourBean.yourValue}" > ...

And then in the stylesheet you can get ahold of the rendered buttons like following (I added an icon to each of the buttons - do whatever you like):

.yourStyleClass div:first-child span {
    background-image: url('logo.png') !important;
    background-position: left center;
    background-repeat: no-repeat;
    margin-left: 6px;
    padding-left: 23px;
}

.yourStyleClass div:nth-child(2) span {
    background-image: url('picture.png') !important;
    background-position: left center;
    background-repeat: no-repeat;
    margin-left: 6px;
    padding-left: 23px;
}

.yourStyleClass div:nth-child(3) span {
    background-image: url('video.png') !important;
    background-position: left center;
    background-repeat: no-repeat;
    margin-left: 6px;
    padding-left: 23px;
}
于 2012-11-30T20:37:39.597 回答
3

There is no "standard" way to do this. The common workaround is to have multiple elements - SelectItem in your case - that are styled differently - and use an expression with the rendered attribute to determine which ones are visible. This works for any component library, not only primefaces.

EDIT : have tried it right now - looks like I cannot influence the styling of the selectitems at all - at least not declaratively in the page. One could try tweaking the theme or overriding the primefaces selectors with custom styling using !important rule. But you would still not get distinct styling for the selectitems.

So please excuse my former confidence and regard this answer as a "No, you can't".

于 2012-06-08T13:19:10.313 回答
2

Ok, I haven't tested this but I'm pretty sure you can do it with the Primefaces Request Context. See this link: RequestContext

This will let you execute client side JavaScript from your backing bean.

So, determine which buttons need to change in your backing bean and then call a JS function that uses jquery's addClass function to add a CSS class to the buttons that need to be styled.

It seems simple enough in my head but I don't have time to test it right now.

于 2012-06-14T03:32:00.530 回答
0

You can try it with Jquery!!

<p:selectOneButton value="#{selectOneView.productViewOption}" styleClass="product-view">
    <f:selectItem itemLabel="" itemValue="Xbox One" />
    <f:selectItem itemLabel="" itemValue="PS4" />
    <f:selectItem itemLabel="" itemValue="Wii U" />
</p:selectOneButton>
<script type="text/javascript">
    $('.product-view div:nth-child(1) span').addClass('fa fa-list fa-2x');
    $('.product-view div:nth-child(2) span').addClass('fa fa-star fa-2x');
    $('.product-view div:nth-child(3) span').addClass('fa fa-th fa-2x');
</script>
于 2015-07-17T02:37:38.467 回答