image - with images

Question

我正在将 JSF 与 Primefaces 一起使用，我想使用仅包含图像的单选按钮按钮集，但我无法使其工作。

这是代码:

    <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”属性来转义字符。
我读了上一篇 in this other question .该问题的解决方案使用 <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;
}

但是，如果您的目标浏览器不支持它( certain IE versions )，那么您将无法通过 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不完全正确。仔细阅读 What is the JSF resource library for and how should it be used?了解更多信息。