Comment personnaliser la mise en page h: selectOneRadio

le layout de H: selectOneRadio peut être horizontal ou vertical, il y a donc un moyen que je puisse faire un layout personnalisé. Par exemple, au lieu d'afficher 8 bouton radio, affichage 2 lignes avec 4 sur chaque ligne? Veuillez fournir votre réponse à côté de PrimeFaces P: selectOneRadio solution, il utiliser CSS3 provoquant IE8 pour afficher le bouton radio en forme de rectangle.

5
demandé sur Thang Pham 2012-06-29 07:00:15

1 réponses

ce n'est pas exactement cela, mais vous pouvez utiliser Tomahawk <t:selectOneRadio> avec l'attribut layout défini à "spread" pour avoir un rendu markupless des boutons radio. Vous pouvez alors utiliser <t:radio> pour placer les différents boutons radio dans le markup comme vous le souhaitez, comme dans un <h:panelGrid columns="4"> .

E. G.

<t:selectOneRadio id="foo" value="#{bean.selectedItem}" layout="spread">
    <f:selectItems value="#{bean.availableItems}" />
</t:selectOneRadio>

<h:panelGrid columns="4">
    <t:radio for="foo" index="0" />
    <t:radio for="foo" index="1" />
    <t:radio for="foo" index="2" />
    <t:radio for="foo" index="3" />

    <t:radio for="foo" index="4" />
    <t:radio for="foo" index="5" />
    <t:radio for="foo" index="6" />
    <t:radio for="foo" index="7" />
</h:panelGrid>

ou même lorsque le montant de boutons radio est non spécifié

<h:panelGrid columns="4">
    <c:forEach items="#{bean.availableItems}" varStatus="loop">
        <t:radio for="foo" index="#{loop.index}" />
    </c:forEach>
</h:panelGrid>

(notez que <ui:repeat> n'est pas adapté car il s'exécute pendant le rendu de la vue et se termine ainsi comme une seule colonne de <h:panelGrid> , vous auriez besoin d'utiliser le HTML simple <table> à la place)

5
répondu BalusC 2012-06-29 13:18:23