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

Question

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

Answer 1

不完全是这样，但你可以使用 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> 不适合，因为它在 View 渲染期间运行，因此最终作为 <h:panelGrid> 的单列结束，您需要使用纯 HTML <table> 代替)