Cách bố trí tùy chỉnh h: selectOneRadio

Question

bố cục của h: selectOneRadio có thể nằm ngang hoặc dọc, vì vậy có cách tôi có thể thực hiện một số bố cục tùy chỉnh. Ví dụ, thay vì hiển thị 8 nút radio, hiển thị chúng trong 2 hàng với 4 hàng trên mỗi hàng? Vui lòng cung cấp câu trả lời của bạn bên cạnh giải pháp PrimeFaces p: selectOneRadio, nó sử dụng CSS3 khiến IE8 hiển thị nút radio theo hình chữ nhật.

Answer 1

Không chính xác như vậy, nhưng bạn có thể sử dụng Tomahawk's<t:selectOneRadio> với thuộc tính layout được đặt thành "spread" để hiển thị nút radio không đánh dấu. Sau đó, bạn có thể sử dụng <t:radio> để đặt các nút radio riêng lẻ trong đánh dấu theo cách bạn muốn, chẳng hạn như trong một <h:panelGrid columns="4">.

Ví dụ:

<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> 

hoặc ngay cả khi số lượng các nút radio là không xác định

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

(lưu ý rằng <ui:repeat> là không phù hợp vì nó chạy trong quá trình xem thời gian render và do đó kết thúc như là một cột duy nhất của <h:panelGrid>, bạn cần phải sử dụng HTML thuần túy <table> thay thế)