<p: selectOneButton> с изображениями

Question

Я использую JSF с Primefaces, я хочу использовать кнопку радио-кнопки только с изображениями, но я не могу заставить ее работать.

Вот код:

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

Примечание: я знаю, что это работает с использованием jQueryUI buttonset() метод (Primefaces использует его в фоновом режиме), так что это не проблема сценария..

Итак, возможно ли сделать это с <p:selectOneButton>?

Спасибо!

Answer 1

Действительно, рендер <p:selectOneButton> не учитывает HTML в ярлыках. Лучше всего вместо этого установить его в качестве фонового изображения CSS.

Учитывая

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

Вы можете стилизовать отдельные кнопки с помощью 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.

$(".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 и как ее использовать? чтобы узнать больше об этом.

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>