使用图像作为p:selectOneRadio的标签

时间:2014-08-07 06:49:38

标签: jsf primefaces jsf-2.2 selectoneradio

给出以下<p:selectOneRadio>列表。

<p:selectOneRadio layout="grid" columns="1" value="#{1}">
    <f:selectItem id="paypal" itemValue="1" itemLabel="Paypal"/>
    <f:selectItem id="wireTransfer" itemValue="2" itemLabel="Wire Transfer"/>
</p:selectOneRadio>

是否可以将图像显示为<f:selectItem>的标签,以使列表看起来如下所示?

enter image description here

我尝试使用<p:outputLabel><p:graphicImage>内放置itemLabel,并从<f:selectItem>内的<p:selectOneRadio>移除<p:outputLabel for="paypal"> <p:graphicImage library="default" name="images/payments/paypal_logo.jpeg"/> </p:outputLabel> 属性,但无论哪种方式都不起作用

{{1}}

2 个答案:

答案 0 :(得分:4)

您可以使用SelectOneRadio - Custom Layout

解决此问题

这是一个例子:

<h3>Custom Layout</h3>
<p:outputPanel id="customPanel" style="margin-bottom:10px">
    <p:selectOneRadio id="customRadio" value="#{radioView.color}" layout="custom">
        <f:selectItem itemLabel="Red" itemValue="Red" />
        <f:selectItem itemLabel="Green" itemValue="Green" />
        <f:selectItem itemLabel="Blue" itemValue="Blue" />
    </p:selectOneRadio>

    <h:panelGrid columns="3" cellpadding="5">
        <p:radioButton id="opt1" for="customRadio" itemIndex="0" />
        <h:outputLabel for="opt1" value="Red" />
        <p:spinner />

        <p:radioButton id="opt2" for="customRadio" itemIndex="1" />
        <h:outputLabel for="opt2" value="Green" />
        <p:inputText />

        <p:radioButton id="opt3" for="customRadio" itemIndex="2" />
        <h:outputLabel for="opt3" value="Blue" />
        <p:calendar />
    </h:panelGrid>
</p:outputPanel>

答案 1 :(得分:0)

make -f makefile.unix