jquery - 如何自定义布局 h:selectOneRadio

Question

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

Answer 1

不完全是这样，但您可以使用Tomahawk 的 <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>）