jQuery mobil onay kutuları 2 dikey sütunda gruplandırılmış mı?

Question

2 onay kutusuyla birlikte grup oluşturmam gerekiyor. Aşağıdaki resimde 2 farklı alan yarattım. Bunun çok anlamsal olmadığını biliyorum ama elde etmek istediğim düzeni gösteriyor.

bunu yapmak için standart bir jQuery Mobile yolu var mı?

Onay kutularının bir bölüme ait gibi görünmesini istiyorum. Yeşil üst sol, pembe alt sol ve mavi alt sağ yuvarlak yuvarlatılmış kaldırabilirsiniz. Bunun için standart CSS geçersiz kılmalarını mı kullanmalıyım yoksa daha zarif bir yol var mı? Teşekkür

Answer 1

Sana Layout Grids bakmak istiyorum düşünüyorum: 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 --> 

GÜNCELLEME Yorumlarınız dayanarak

, hayır iki ayrı sütun biri fieldset halinde gruplandırılmış olamaz. Bir ebeveyni fieldset ve iç içe iki Tamam ise, Ancak http://jsfiddle.net/shanabus/qNYPh/1/

: Bir fieldset üzerine

data-role="controlgroup" gruplandırılmış etkiyi vermek marjları ve dolgu kaldırır, ama ne ile bitirmek böyle bir şeydir http://jsfiddle.net/shanabus/hcyfK/1/

Answer 2

shanabus onun iç içe gruplandırılmış solüsyonu ile iyi bir cevap verdi: gruplandırılmış fieldsets ... o zaman böyle bir çözüm ile sona erebilir http://jsfiddle.net/shanabus/hcyfK/1/

sen alabileceği bir adım fu dokunarak yuvarlatılmış köşelerden kurtulmak ve daha tutarlı bir görünüm elde etmek için, gerekli css 'kenarlık yarıçapı' değerlerini sıfırlamak veya herhangi bir köşe için sıfırlamak suretiyle röleye getirin. Örneğin gereğince

: Ben ayrı bir HTML & css vermedi çünkü

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

Evet, kötü bir insanım ama bu bir örnek. :-)