Griglia jQuery Mobile

Griglia di layout jQuery Mobile

jQuery Mobile offre una serie di soluzioni di layout a colonne basate su CSS. Tuttavia, non si consiglia di utilizzare il layout a colonne sui dispositivi mobili, a causa delle limitazioni della larghezza dello schermo di questi dispositivi.

Ma a volte hai bisogno di posizionare elementi più piccoli, come pulsanti o menu di navigazione, come nelle tabelle, in modo che si allineino fianco a fianco. In questi casi, il layout a colonne è perfetto.

Le colonne nella griglia sono di larghezza uguale (larghezza totale 100%), senza bordi, sfondo, margine esterno o interno.

Ci sono quattro tipi di layout di griglia disponibili:

Classe della griglia Colonna Larghezza della colonna Corrispondente Esempio
ui-grid-a 2 50% / 50% ui-block-a|b Test
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c Test
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d Test
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e Test

Suggerimento:Nel contenitore delle colonne, a seconda del numero di colonne, gli elementi figli possono essere impostati con la classe ui-block-a|b|c|d|e. Queste colonne fluttueranno in ordine uno accanto all'altro.

Esempio 1: Per la classe ui-grid-a (layout a due colonne), devi specificare due elementi figli ui-block-a e ui-block-b.

Esempio 2: Per la classe ui-grid-b (layout a tre colonne), aggiungi tre elementi figli ui-block-a, ui-block-b e ui-block-c.

Personalizzazione della griglia

Puoi personalizzare i blocchi delle colonne utilizzando CSS:

Esempio

<style>
.ui-block-a, 
.ui-block-b, 
.ui-block-c 
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>

Prova da Solo

Puoi anche personalizzare i blocchi utilizzando stili inline:

<div class="ui-block-a" style="border: 1px solid black;"><span>Testo..</span></div>

Righe multiple

È anche possibile includere più righe in una colonna.

Nota:ui-block-a-class creerà sempre una nuova riga:

Esempio

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Qualche Testo</span></div>
  <div class="ui-block-b"><span>Qualche Testo</span></div>
  <div class="ui-block-c"><span>Qualche Testo</span></div>
  <div class="ui-block-a"><span>Qualche Testo</span></div>
  <div class="ui-block-b"><span>Qualche Testo</span></div>
  <div class="ui-block-a"><span>Qualche Testo</span></div>
</div>

Prova da Solo