jQuery Mobile layout Griglie
jQuery Mobile fornisce una serie di layout di colonna basati su CSS. Tuttavia, i layout delle colonne non sono generalmente consigliati su un dispositivo mobile, grazie alla larghezza dello schermo del cellulare.
Ma ci sono volte che si desidera posizionare gli elementi più piccoli, come i pulsanti o schede di navigazione, side-by-side, come se fosse in una tabella. Poi, le colonne sono perfetti.
Colonne in una griglia sono di uguale larghezza (e il 100% di larghezza in totale), senza border, background, margin o padding .
Ci sono cinque griglie di layout che possono essere utilizzati:
| Griglia di Classe | colonne | la larghezza delle colonne | Corrisponde a | Esempio |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
All'interno del contenitore di colonna, elementi secondari possono avere la classe ui-block-a|b|c|d|e , a seconda del numero di colonne. Le colonne galleggiano side-by-side.
Esempio 1: per l'interfaccia utente-grid-una classe (che è un layout a due colonne), è necessario specificare due elementi figli di ui-block-a e ui-block-b .
Esempio 2: Per ui-grid-b (layout a tre colonne), aggiungere tre elementi figlio di ui-block-a, ui-block-b e ui-block-c .
personalizzare Griglie
È possibile personalizzare i blocchi di colonna utilizzando i 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 tu stesso " È inoltre possibile personalizzare i blocchi utilizzando gli stili inline:
<div class="ui-block-a" style="border:1px solid
black;"><span>Text..</span></div>
più righe
E 'anche possibile avere avere più righe all'interno le colonne.
Nota: Il ui-block-a-class sarà sempre creare una nuova linea:
Esempio
<div class="ui-grid-b">
<div class="ui-block-a"><span>Some
Text</span></div>
<div class="ui-block-b"><span>Some
Text</span></div>
<div class="ui-block-c"><span>Some
Text</span></div>
<div class="ui-block-a"><span>Some
Text</span></div>
<div class="ui-block-b"><span>Some
Text</span></div>
<div class="ui-block-a"><span>Some
Text</span></div>
</div>
Prova tu stesso " Griglie responsive
Su schermi di piccole dimensioni, non è consigliabile avere troppi pulsanti con side-by-side testo su una riga - come il testo potrebbe avere accorciato.
Per le griglie reattivi, aggiungere la classe ui-reattiva al contenitore: