<p:selectOneButton>有图片 [英] <p:selectOneButton> with images

问题描述

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

I'm using JSF with Primefaces, I want to use a buttonset of radiobutton with only images but I can't make it work.

代码如下:

    <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"属性来转义字符.我在另一个问题中阅读了最后一个.该问题的解决方案使用 ，而不是 .

I tried escaping characters with "escape", "escapeItem" and even "itemEscaped" attributes. I read about the last one in this other question. The solution in that question uses <h:selectOneRadio>, not <p:selectOneButton>.

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

Note: I know it works using jQueryUI buttonset() method (Primefaces uses it on the background) so it's not a script problem..

那么，是否可以使用 来做到这一点?

So, is it posible to do this with <p:selectOneButton>?

谢谢！

推荐答案

确实， 的渲染器并没有考虑标签中的任何 HTML.最好的办法是将其设置为 CSS 背景图片.

Indeed, the renderer of <p:selectOneButton> doesn't take into account any HTML in labels. Your best bet is to set it as CSS background image instead.

给定一个

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

你可以使用 CSS3 :nth-child() 伪选择器

you can style the individual buttons using 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 来执行这项工作.

If you're however targeting browsers which don't support it (certain IE versions), then you can't go around performing the job via 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资源库的用途以及如何使用它? 了解更多信息.

---

Unrelated to the concrete problem, the way how you're using resource library is not entirely right. Carefully read What is the JSF resource library for and how should it be used? to learn more about it.

这篇关于&lt;p:selectOneButton&gt;有图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！