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.
Per un progettino sto usando jQuery Mobile, e come ogni volta mi ritrovo con qualche problematica che vedo essere richiesta anche in giro per il web.
In questo caso parliamo di come impostare il footer a fondo pagina.
Perchè di fatto, di default, il footer di JQM non è fisso, e sulle pagine non è bello vedere il footer che sta a metà schermata.
jQuery Mobile id default no nprevede componenti per creare menu a tab (al contrario ad esempio di Sencha Touch).
E' possibile, però, facilmente ovviare al problema.
Supponiamo di avere due pagine e di voler mettere il menu in basso e in maniera fissa.
Ad oggi è sempre più indispensabile avere gallerire fotografiche sul web sensibili al touch.
In giro già si trovano diverse gallerie in grado di farlo.
Io mi sono buttato su PhotoSwipe.
La galleria l'ho poi integrata con jQuery Mobile in modo da avere il tutto in una singola applicazione e in modo che la galleria posso interagire con altre pagine.
La libreria PhotoSwipe è abbastanza semplice da usare ed ha parecchie opzioni al suo interno.
Prima di tutto creiamo una pagina in stile jQuery Mobile:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link type="text/css" rel="stylesheet" href="css/style_collection.css" media="screen" />
<link type="text/css" rel="stylesheet" href="css/photoswipe.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="js/klass.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe.jquery-3.0.4.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body><div data-role="page" id="adv" data-theme="a" data-add-back-btn="true" class="gallery-page">
<div data-role="header" data-position="fixed">
<h1>Gallery</h1>
</div>
<div data-role="content">
LE FOTO
</div>
</div>
Ci sono tre fogli di stile, di cui il primo è quello di JQM e gli altri di due della galleria (che avete scaricato nella pagina insieme ai file JS).
Poi ho incluso cinque file JS:
Poi ho messo una singola pagina, preparata però per essere messa in una struttura multi-page.