带图像的<p:selectOneButton>

Question

我正在使用带有Primefaces的JSF,我想使用只有图像的radiobutton按钮组,但我不能使它工作.

这是代码:

    <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>

我尝试使用"escape","escapeItem"甚至"itemEscaped"属性转义字符.我读到了另一个问题中的最后一个.该问题的解决方案<h:selectOneRadio>不是使用<p:selectOneButton>.

注意:我知道它使用jQueryUI buttonset()方法(Primefaces在后台使用它),所以它不是脚本问题..

那么,这样做是否可行<p:selectOneButton>？

谢谢!

Answer 1

实际上,渲染器<p:selectOneButton>没有考虑标签中的任何HTML.您最好的选择是将其设置为CSS背景图像.

给出一个

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

你可以使用CSS3 :nth-child()伪选择器设置各个按钮的样式

.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;
}

但是,如果你的目标浏览器不支持它(某些IE版本),那么你就无法通过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");

与具体问题无关,您使用资源的library方式并不完全正确.仔细阅读什么是JSF资源库以及如何使用它？了解更多信息.