Geek Answers Handbook

<p: selectOneButton> with images

I use JSF with Primefaces, I want to use a set of radio lens buttons only with images, but I can't get it to work.

Here is the code:

<p:selectOneButton value="#{LoginBean.user}" > <f:selectItem itemLabel="&lt;img src=&quot;/myApp/faces/javax.faces.resource/myImg1.png?ln=img&quot;/&gt;" itemValue="1"/> <f:selectItem itemLabel="&lt;img src=&quot;/myApp/faces/javax.faces.resource/myImg2.png?ln=img&quot;/&gt;" itemValue="2"/> </p:selectOneButton>

I tried escaping characters with the attributes "escape", "escapeItem" and even "itemEscaped". I read about the latter in this other question . The solution in this question is using <h:selectOneRadio> , not <p:selectOneButton> .

Note: I know this works using the jQueryUI buttonset() method (Primefaces uses it in the background), so this is not a script problem.

So, is it possible to do this with <p:selectOneButton> ?

Thanks!

+4
source share
1 answer

Indeed, the <p:selectOneButton> renderer does not consider HTML in labels. It is best to set it as a CSS background image.

Considering

 <p:selectOneButton ... styleClass="buttons">

you can style individual buttons with CSS3 :nth-child() pseudo selector

 .buttons .ui-button:nth-child(1) { background: url("#{resource['img/myImg1.png']}") no-repeat; } .buttons .ui-button:nth-child(2) { background: url("#{resource['img/myImg2.png']}") no-repeat; }

If you use targeting for browsers that do not support it ( certain versions of IE ), then you cannot bypass the task execution through JS / jQuery.

 $(".buttons .ui-button:eq(0)").css("background", "url('resources/img/myImg1.png') no-repeat"); $(".buttons .ui-button:eq(1)").css("background", "url('resources/img/myImg2.png') no-repeat");

Unrelated to a specific problem, the way to use the library resource is not quite right. Read carefully What is the JSF resource library and how to use it? to learn more about this.

+4
source

More articles:


All Articles