Lezione #id-jqmobile-2013-0012#
JQuery Mobile per creare un design Responsive offre un sostema di Griglie.
Le Griglie sono invisibili, non hanno bordi o colore di fondo, non hanno padding. In questo modo non interferiscono con il design degli elementi che ospitano al loro interno.
Griglia a 2 colonne:
<div class="ui-grid-a">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">Block B</div></div>
</div><!-- /grid-a -->
Notare che la griglia viene indicata da class=”ui-grid-a” e il blocco interno da class=”ui-block-a” se ne aggiungiamo altri seguiranno i blocchi b / c / d / e. Lo stile applicato al singolo blocco è indicato dall’attributo class=”ui-bar ui-bar-e”
Griglia a 3 colonne:
<div class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">Block B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">Block C</div></div>
</div><!-- /grid-b -->
Notare i blocchi class=”ui-block-a” b / c
Griglia a 4 colonne:
<div class="ui-grid-c">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:60px">D</div></div>
</div><!-- /grid-c -->
Griglia a 5 colonne:
<div class="ui-grid-d">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:60px">D</div></div>
<div class="ui-block-e"><div class="ui-bar ui-bar-e" style="height:60px">E</div></div>
</div><!-- /grid-c -->
Griglia a colonne multiple
<div class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>
</div><!-- /grid-c -->
class=”ui-grid-b” creo una griglia a 3 colonne, inserisco la sequenza dei blocchi.
Griglia che contiene altri elementi
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
</fieldset>
Griglia con una sola cella
<div class="ui-grid-a">
<div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div>
<div class="ui-block-b"><button type="button" data-theme="c">Next</button></div>
</div>
<div class="ui-grid-solo">
<div class="ui-block-a"><button type="button" data-theme="b">More</button></div>
</div>
JQuery ha già dei parametri proprietari per creare Griglie Responsive. Il breakpoint stabilito è di 560px.
Quando la risoluzione in larghezza della finestra scende sotto i 560px tutti i blocchi si allineano uno sopra l’altro in quanto nel CSS viene assegnata loro un width=100%.
Per valori in larghezza superiori o uguali a 560px gli spazi saranno così suddivisi:
– class=”ui-grid-a” ->2 colonne 50%+50%
– class=”ui-grid-b” ->3 colonne 33%+33%+33%
– class=”ui-grid-c” ->4 colonne 25%+25%+25%+25%
– class=”ui-grid-d” ->5 colonne 20%+20%+20%+20%
Griglia Responsive con i parametri di default, aggiungere l’attributo ui-responsive:
<h3>Grid A (50/50)</h3>
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
<div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
</div><!-- /grid-a -->
<h3>Grid B (33/33/33)</h3>
<div class="ui-grid-b ui-responsive">
<div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
<div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
<div class="ui-block-c"><div class="ui-body ui-body-d">Block C</div></div>
</div><!-- /grid-b -->
<h3>Grid C (25/25/25/25)</h3>
<div class="ui-grid-c ui-responsive">
<div class="ui-block-a"><div class="ui-body ui-body-d">A</div></div>
<div class="ui-block-b"><div class="ui-body ui-body-d">B</div></div>
<div class="ui-block-c"><div class="ui-body ui-body-d">C</div></div>
<div class="ui-block-d"><div class="ui-body ui-body-d">D</div></div>
</div><!-- /grid-c -->
<h3>Grid D (20/20/20/20/20)</h3>
<div class="ui-grid-d ui-responsive">
<div class="ui-block-a"><div class="ui-body ui-body-d">A</div></div>
<div class="ui-block-b"><div class="ui-body ui-body-d">B</div></div>
<div class="ui-block-c"><div class="ui-body ui-body-d">C</div></div>
<div class="ui-block-d"><div class="ui-body ui-body-d">D</div></div>
<div class="ui-block-e"><div class="ui-body ui-body-d">E</div></div>
</div><!-- /grid-d -->
Griglia responsive personalizzata, riassegnamo all’attributo ui-block-a b / c / d / e un breakpoint differente dai 560px di default.
/* stack all grids below 40em (640px) */
@media all and (max-width: 35em) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 100%;
float: none;
}
}
