5

我正在使用带有 Primefaces 的 JSF，我想使用一个只有图像的单选按钮按钮集，但我无法让它工作。

这是代码：

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

注意：我知道它使用 jQueryUIbuttonset()方法工作（Primefaces 在后台使用它）所以这不是脚本问题..

那么，可以这样做<p:selectOneButton>吗？

谢谢！

4

2 回答 2

6

事实上， 的渲染器<p:selectOneButton>并没有考虑标签中的任何 HTML。最好的办法是将其设置为 CSS 背景图像。

给定一个

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

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

.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 资源库是干什么用的，应该如何使用？了解更多信息。

于 2013-01-10T20:29:31.180 回答
0

我只是想使用 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>
于 2020-12-31T22:03:56.063 回答