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

我尝试使用转义"，"escapeItem"甚至"itemEscaped"属性转义字符. 我在另一个问题中了解了最后一个.该问题中的解决方案使用<h:selectOneRadio>，而不是<p:selectOneButton>.

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

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

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

谢谢！

推荐答案

实际上，<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.

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