Se andiamo a vedere la documentazione di jQuery Mobile, vedremmo diversi esempi di bottoni sull'header.
Ma gli esempi si limitano ad un massimo di due bottoni, uno a destra e uno a sinitra del titolo.
Questo perchè, in verità, di default non sono previsti casi più particolari.
Oggi vediamo come impostarne più di due, tre nel caso specifico.
Per farlo ci basterà usare alcune direttive di JQM.
Vediamo un piccolo tip per chiudere un componente Panel in jQuery Mobile.
Un primo modo, visibile anche nella documentazione, è quello di usare un tasto apposito:
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
Qui si usa l'attributo data-rel="close".
Supponiamo di avere una jQuery Mobile Listview con parecchi elementi.
Come fare per poter ricercare all'interno soltanto determinati elementi?
Molto semplicemente aggiungendo gli attributi giusti!
Prima di tutto date un'occhiata agli esempi basici che potete trovare qua.
Se vedete più sotto c'è anche l'esempio per il filter.
Se abbiamo un'applicazione multi-pagina con jQuery Mobile, e vogliamo passare parametri tra le varie pagine, non ci basta usare i classici parametri in GET; dobbiamo arrangiarci in altro modo.
Io personalmente ho usato sessionStorage!
In pratica nel link setto tutti i valori che mi servono usando setItem, e nella pagina di arrivo li prendo con getItem.
Quindi, il nostro link sarà una cosa del genere:
<a href="#page_up_tempo" data-transition="slideup"
onclick="
sessionStorage.setItem('nome', 'MATTE');
sessionStorage.setItem('cognome', 'PUFFO');
">
A questo punto dobbiamo prendere i valori nella pagina page_up_tempo.
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.