image - <p: selectOneButton> con imágenes

jsf primefaces

Question

Estoy usando JSF con Primefaces, quiero usar un boton de radiobutton con solo imagenes pero no puedo hacerlo funcionar.

Aquí está el código:

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

Intenté escapar de los caracteres con los atributos "escape", "escapeItem" e incluso "itemEscaped". Leí sobre el último en esta otra pregunta . La solución en esa pregunta usa <h:selectOneRadio> , no <p:selectOneButton> .

Nota: Sé que funciona usando el método jQueryUI buttonset() (Primefaces lo usa en el fondo) por lo que no es un problema de script.

Entonces, ¿es posible hacer esto con <p:selectOneButton> ?

¡Gracias!

Answer 1

De hecho, el procesador de <p:selectOneButton> no tiene en cuenta ningún HTML en las etiquetas. Su mejor opción es establecerlo como imagen de fondo CSS en su lugar.

Dado un

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

Puede personalizar los botones individuales con 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;
}

Sin embargo, si se dirige a navegadores que no lo admiten ( ciertas versiones de IE ), no podrá realizar el trabajo a través de 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");

Sin relación con el problema concreto, la forma en que está utilizando la library recursos no es del todo correcta. Lea detenidamente ¿Para qué sirve la biblioteca de recursos JSF y cómo se debe usar? para aprender más sobre eso