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”属性转义字符。我读到了最后一个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?以了解有关它的更多信息。

Answer 2

我只是想使用 Font Awesome Icons。这可以通过设置 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>

<p：selectonebutton> with images </p：selectonebutton>

2 个答案: