h:selectOneRadio的布局可以是水平的也可以是垂直的,所以有一种方法可以做一些自定义布局.例如,不是显示8个单选按钮,而是将它们显示为2行,每行4个?请在PrimeFaces p:selectOneRadio解决方案旁边提供答案,它使用
CSS3导致IE8显示矩形形状的单选按钮.
解决方法
这不完全是这样,但你可以使用
Tomahawk’s
<t:selectOneRadio>
,将layout属性设置为“spread”,以便对单选按钮进行无标记渲染.然后,您可以使用
<t:radio>
将所需的单个单选按钮放在标记中,例如在< h:panelGrid columns =“4”>中.
例如.
<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>
甚至当未指定单选按钮的数量时
<h:panelGrid columns="4"> <c:forEach items="#{bean.availableItems}" varStatus="loop"> <t:radio for="foo" index="#{loop.index}" /> </c:forEach> </h:panelGrid>
(请注意,< ui:repeat>不适合在视图渲染时运行,因此最终成为< h:panelGrid>的单列,您需要使用纯HTML< table>而不是)