jQuery komórkowe pola wyboru pogrupowane w 2 pionowe kolumny?

Question

Muszę zaznaczyć pole wyboru razem, ale w 2 kolumnach. Na obrazie poniżej stworzyłem 2 różne zestawy pól. Wiem, że to nie jest bardzo semantyczne, ale wyświetla układ, który chcę osiągnąć.

Czy istnieje standardowy sposób jQuery Mobile, aby to zrobić?

Chcę, aby pola wyboru wyglądały tak, jakby należały do ​​jednej sekcji. Mogłem usunąć zaokrąglony krater z zielonego górnego lewego, różowego dolnego lewego i niebieskiego dolnego prawego. Czy muszę używać standardowych nadpisań CSS w tym celu lub czy istnieje bardziej elegancki sposób? Dzięki

Answer 1

myślę, że warto spojrzeć na 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 --> 

UPDATE

podstawie Twojego komentarza, nie można nie mieć dwa oddzielne kolumny zgrupowane w jednym fieldset.

data-role="controlgroup" na zestaw pól usuwa marginesy i dopełnienie dać zgrupowany efekt, ale co skończy się to mniej więcej tak: http://jsfiddle.net/shanabus/qNYPh/1/

Jednakże, jeśli jesteś ok z jednym rodzicem fieldset i dwóch zagnieżdżonych, zgrupowane, fieldsets ... wtedy można skończyć z takiego rozwiązania: http://jsfiddle.net/shanabus/hcyfK/1/

Answer 2

shanabus dał dobrą odpowiedź z jego zagnieżdżone zgrupowane rozwiązanie: http://jsfiddle.net/shanabus/hcyfK/1/

można przyjąć, że jeden krok fu Po ustawieniu/przesłonięciu odpowiednich wartości css 'border promień' na zero dla każdego rogu, aby pozbyć się zaokrąglonych rogów i uzyskać bardziej spójny wygląd.

Jak na przykład:

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

Tak, jestem złym człowiekiem, bo nie wydzieliła HTML & css ale jest tego przykładem. :-)