Các hộp kiểm tra di động jQuery được nhóm trong 2 cột dọc?

Question

Tôi cần nhóm hộp kiểm với nhau nhưng trong 2 cột. Trong hình bên dưới, ive đã tạo 2 trường khác nhau. Tôi biết điều này không phải là rất ngữ nghĩa nhưng nó hiển thị bố trí tôi muốn đạt được.

Có cách jQuery Mobile chuẩn để thực hiện việc này không?

Tôi muốn các hộp kiểm trông giống như chúng thuộc về một phần. Tôi có thể loại bỏ các corder tròn của màu xanh lá cây trên bên trái, dưới cùng màu hồng bên trái và bên phải màu xanh bên phải. Tôi có cần phải sử dụng phần ghi đè CSS chuẩn cho điều này hoặc có cách thanh lịch hơn không? Cảm ơn

Answer 1

Tôi nghĩ rằng bạn muốn nhìn vào Layout Grids: http://jquerymobile.com/test/docs/content/content-grids.html

<div class="ui-grid-a"> 
    <div class="ui-block-a"> 
      <label><input type="checkbox" name="checkbox-1" /> Any</label> 
      <label><input type="checkbox" name="checkbox-1" /> Red </label> 
     </div> 
    <div class="ui-block-b"> 
      <label><input type="checkbox" name="checkbox-1" /> Green </label> 
      <label><input type="checkbox" name="checkbox-1" /> Black </label> 
     </div> 
</div><!-- /grid-a --> 

CẬP NHẬT

Dựa trên nhận xét của bạn, không bạn không thể có hai cột riêng nhóm lại thành một fieldset.

Các data-role="controlgroup" trên fieldset loại bỏ các lề và padding để cung cấp cho các hiệu ứng nhóm, nhưng những gì bạn kết thúc với một cái gì đó như thế này: http://jsfiddle.net/shanabus/qNYPh/1/

Tuy nhiên, nếu bạn là ok với một phụ huynh fieldset và hai lồng nhau, nhóm, fieldsets ... sau đó bạn có thể kết thúc với một giải pháp như thế này: http://jsfiddle.net/shanabus/hcyfK/1/

Answer 2

shanabus đã đưa ra một câu trả lời tốt với giải pháp nhóm lại lồng của mình: http://jsfiddle.net/shanabus/hcyfK/1/

bạn có thể mất một bước fu rther bằng cách thiết lập/ghi đè các giá trị bán kính biên giới css thích hợp bằng 0 cho bất kỳ góc nào bạn cần để loại bỏ các góc tròn được chạm vào và đạt được một diện mạo nhất quán hơn.

Theo ví dụ:

<label for="radio-choice-1" style="border-top-right-radius: 0">Cat</label> 
<label for="radio-choice-2" style="border-bottom-right-radius: 0">Dog</label> 
<label for="radio-choice-3" style="border-top-left-radius: 0">Hamster</label> 
<label for="radio-choice-4" style="border-bottom-left-radius: 0">Lizard</label> 

Vâng, tôi là một người xấu bởi vì tôi đã không html riêng & css nhưng nó là một ví dụ. :-)