如何自定义布局h：selectOneRadio [英] How to custom layout h:selectOneRadio

问题描述

h：selectOneRadio的布局可以水平或垂直，所以有一种方法，我可以做一些自定义布局。例如，而不是显示8单选按钮，显示它们在2行，每行4？请在PrimeFaces p：selectOneRadio解决方案旁边提供您的答案，它使用CSS3导致IE8显示矩形形状的单选按钮。

解决方案

这不完全是这样，但您可以使用 Tomahawk的 布局属性设置为spread的< t：selectOneRadio& 以便无标记呈现单选按钮。然后，您可以使用 < t：radio> 将各个单选按钮放置在标记中，例如在< h：panelGrid columns =4> 。

例如

 < t：selectOneRadio id =foovalue =＃{bean.selectedItem}layout =spread> 
< f：selectItems value =＃{bean.availableItems}/> 
< / t：selectOneRadio> 
 
< h：panelGrid columns =4> 
< t：radio for =fooindex =0/> 
< t：radio for =fooindex =1/> 
< t：radio for =fooindex =2/> 
< t：radio for =fooindex =3/> 
 
< t：radio for =fooindex =4/> 
< t：radio for =fooindex =5/> 
< t：radio for =fooindex =6/> 
< t：radio for =fooindex =7/> 
< / h：panelGrid> 
  

或者即使未指定单选按钮的数量

 < h：panelGrid columns =4> 
< c：forEach items =＃{bean.availableItems}varStatus =loop> 
< t：radio for =fooindex =＃{loop.index}/> 
< / c：forEach> 
< / h：panelGrid> 
    
 
 
（请注意< ui：repeat> 不适合，因为它在视图渲染时运行，因此结束为< h：panelGrid> 的单列，您需要使用plain  
 
the layout of h:selectOneRadio can either go horizontal or vertical, so is there a way that I can do some custom layout. For example, instead of displaying 8 radio button, display them in 2 rows with 4 on each row? Please provide your answer beside PrimeFaces p:selectOneRadio solution, it use CSS3 causing IE8 to display the radio button in rectangle shape. 
解决方案
It's not exactly that, but you could use Tomahawk's <t:selectOneRadio> with the layout attribute set to "spread" to have a markupless rendering of radio buttons. You can then use <t:radio> to place the individual radio buttons in the markup the way you want, such as in a <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>
or even when the amount of radio buttons is unspecified
<h:panelGrid columns="4">
    <c:forEach items="#{bean.availableItems}" varStatus="loop">
        <t:radio for="foo" index="#{loop.index}" />
    </c:forEach>
</h:panelGrid>
(note that <ui:repeat> is not suitable as it runs during view render time and thus end up as a single column of <h:panelGrid>, you'd need to use plain HTML <table> instead)

                        
这篇关于如何自定义布局h：selectOneRadio的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！