jQuery caselle di controllo raggruppate in 2 colonne verticali?

Ho bisogno di raggruppare la casella di controllo insieme ma in 2 colonne. Nell'immagine qui sotto sono stati creati 2 diversi set di campi. So che questo non è molto semantico ma mostra il layout che voglio raggiungere.jQuery caselle di controllo raggruppate in 2 colonne verticali?

enter image description here

C'è un modo standard jQuery Mobile per fare questo?

Desidero che le caselle di controllo sembrino appartenere a una sezione. Potrei rimuovere il cordone arrotondato di verde in alto a sinistra, rosa in basso a sinistra e blu in basso a destra. Devo usare le sostituzioni CSS standard per questo o esiste un modo più elegante? Grazie

fonte

2012-04-26 Evans

Stai chiedendo come ottenere due colonne? O semplicemente come rimuovere gli angoli arrotondati sul lato interno delle colonne? O entrambi? – Todd

Penso che si desidera guardare 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

Sulla base di un commento, non si può non avere due colonne separate raggruppate in uno fieldset.

La data-role="controlgroup" su un fieldset rimuove i margini e padding per dare l'effetto raggruppati, ma che cosa si finisce con è qualcosa di simile: http://jsfiddle.net/shanabus/qNYPh/1/

Tuttavia, se siete ok con un genitore fieldset e due nidificato, raggruppato, fieldsets ... allora si può finire con una soluzione di questo tipo: http://jsfiddle.net/shanabus/hcyfK/1/

fonte

2012-04-26 12:41:12 shanabus

Posso usare quelli per creare colonne ma voglio lavorare con un singolo fieldset e pulsanti radio in modo da poter avere lo stile utilizzato nell'immagine nella mia domanda. Non sembra che le griglie di layout possano farlo. Grazie – Evans

controlla la mia risposta aggiornata, l'ultimo collegamento jsfiddle fornisce una soluzione di lavoro, penso. – shanabus

Questo era proprio quello di cui avevo bisogno. Grazie! ha fatto +1 – Deses

shanabus ha dato una buona risposta con la sua soluzione raggruppati nidificato: http://jsfiddle.net/shanabus/hcyfK/1/

si può prendere che un passo fu rther impostando/sovrascrivendo i valori appropriati del "raggio del bordo" del css a zero per ogni angolo necessario per eliminare gli angoli arrotondati commoventi e ottenere un aspetto più coerente.

Come per l'esempio:

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

Sì, io sono una persona cattiva, perché non ho HTML separato & css ma è un esempio. :-)

fonte

2013-11-25 18:17:42 TK71

jQuery caselle di controllo raggruppate in 2 colonne verticali?

risposta

Problemi correlati