Latest web development tutorials

jQuery Mobile griglia

jQuery Mobile Griglia layout

jQuery Mobile fornisce una ripartizione di un layout basato su CSS. Tuttavia, su dispositivi mobili, considerando la larghezza dello schermo del telefono stretta, in genere si sconsiglia l'uso di layout di colonna disaggregata.

Ma a volte si desidera elementi più piccoli (come i pulsanti o schede di navigazione) sono disposti fianco a fianco insieme, come come in una tabella. In questo caso, si raccomanda di utilizzare la layout sub-column.

colonne della griglia sono di uguale larghezza (totale 100%), nessun bordo, sfondo, il margine o padding.

Ci sono quattro griglia di layout sono disponibili:

classe griglia fila Larghezza colonna corrispondenza Esempi
ui-grid-solo 1 100% ui-block-a provare
ui-grid-a 2 50% / 50% ui-block-A | B provare
ui-grid-b 3 33% / 33% / 33% ui-block-A | B | C provare
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-A | B | C | D provare
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-A | B | C | D | e provare

lampada In contenitori di colonna, sottoelementi hanno classe come ui-block-a | b | c | d | e in base al numero di colonne. Floating lato fila a fianco.

Esempi 1: classe di ui-grid-A (due layout), è necessario specificare l'interfaccia utente-blocco-a e ui-block-b dei due sotto-elementi.

Esempi 2: classe di ui-grid-b (tre layout), è necessario aggiungere ui-blocco-a, UI- blocco B e ui-block-C dei tre sotto-elementi.

griglia personalizzata

Utilizzando i CSS, è possibile personalizzare i blocchi della colonna:

Esempi

<Style>
.ui-block-a, .ui-block-b, .ui-block-C {
background-color: lightgray;
border: 1px nero solido;
altezza: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</ Style>

Prova »

È inoltre possibile personalizzare utilizzando i blocchi di stile in linea: 

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

Multi-line

Nella colonna, si può anche avere più linee.

Nota: ui-block-a-class creare sempre una nuova linea:

Esempi

<Div class = "ui-grid-b">
<Div class = "ui-block-a"> <span> un testo </ span> </ div>
<Div class = "ui-block-b"> <span> un testo </ span> </ div>
<Div class = "ui-block-c"> <span> un testo </ span> </ div>
<Div class = "ui-block-a"> <span> un testo </ span> </ div>
<Div class = "ui-block-b"> <span> un testo </ span> </ div>
<Div class = "ui-block-a"> <span> un testo </ span> </ div>
</ Div>

Prova »

Griglia responsive

Nel piccolo schermo, troppo non è raccomandato in una traversa di fila con il tasto laterale (testo abbreviato).

Creiamo una griglia reattivo per l'uso in contenitori categorie UI-reattivo:

Esempi

<Div class = "ui-grid -b ui-reattivo">

Prova »