jQuery Mobile lo conosciamo, è un ottimo framework basato su jQuery indirizzato al mobile.
Tra i componenti ne manca uno essenziale, a mio parere: un datepicker.
In giro ci sono vari datepicker indirizzati al mobile, e tra questi io personalmente ho scelto DateBox.
Le opzioni, come potete vedere, sono tantissime e l'aspetto grafico in perfetto stile jQuery Mobile.
Creare un componente select in jQuery Mobile non è niente di speciale.
Basta il classico codice HTML, condito magari da qualche attributo per lo stile.
Ma quando si tratta di impostare un valore di default, non basta il classico attributo selected.
Bisogna agire di Javascript con un piccolo trucco.
Prima di tutto dobbiamo considerare l'evento pageshow di JQM; è qui che andremo a fare il tutto.
In una web app (soprattutto se creata per il mobile) può capitare di dover riempire un componente select con dati presi in formato tipo JSON o XML, magari presi tramite AJAX.
Io tra i due ho preferito JSON, vista anche la facilità di prendere questi dati tramite jQuery con la funzione getJSON.
Prima di tutto sulla pagina create una select:
<select id="my_select"></select>
Può essere totalmente vuota o con alcuni componenti preimpostati.
Anche con Javascript è possibile identificare i dispositivi mobile.
Vi indicherò due modalità per farlo, di cui una più compatta e l'altra più specifica.
Comunque un entrambi i casi useremo l'oggetto navigator.
Questa la prima funzione:
function detectMobile() {
if (navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
) {
return true;
} else {
return false;
}
}
Diciamo che si commenta da sola.
Di default l'aspetto di jQuery Mobile è gradevole.
Ci sono giusto alcuni componenti che potrebbero essere resi meglio, soprattutto se si apre la pagina con un browser desktop e non con un dispositivo mobile.
E' il caso del componente select, che è molto soggetto alla combinazione piattaforma-browser.
In un app mobile, fatta con jQuery Mobile, mi è capitato di dover riempire una tabella con dati presi da un web service in formato JSON.
Ho quindi dovuto usare Javascript per leggere i dati e riempire la tabella.
Dato che ho visto che è una cosa non così inusuale, vediamo come fare in questo semplice articolo.
Partiamo da questo codice HTML:
<table id="my_table">
<tbody>
</tbody>
</table>
Una tabella vuota in pratica.