<p：selectOneButton> 带图像

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"属性转义字符。我在另一个问题中读到了最后一个。题目中的解使用<h:selectOneRadio>，而不是<p:selectOneButton>。

注:我知道它使用jQueryUI buttonset()方法(Primefaces在背景上使用它)，所以它不是一个脚本问题。

那么，<p:selectOneButton>有可能做到这一点吗?

谢谢!

Answer 1

确实，<p:selectOneButton>的渲染器不考虑标签中的任何HTML。你最好把它设置为CSS背景图片。

给定

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

您可以使用CSS3 :nth-child() pseudoselector为单个按钮设置样式

.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资源库是用来做什么的以及应该如何使用它?

Answer 2

我只是想使用字体Awesome图标。这可以通过设置font-family: FontAwesome并使用以下代码来实现:https://fontawesome.com/v4.7.0/cheatsheet/

<p:selectOneButton value="#{mybean.alignment}" style="font-family: FontAwesome;">
   <f:selectItem itemValue="align-left" itemLabel="&#xf036;"/>
   <f:selectItem itemValue="align-center" itemLabel="&#xf037;"/>
   <f:selectItem itemValue="align-right" itemLabel="&#xf038;"/>
</p:selectOneButton>