La versione 1.3 di jQuery Mobile (fine febbraio) ha portato con sé alcune importanti novità, una di queste è il panel.
Chiunque abbia provato a creare applicazioni mobile, soprattutto per smartphone, si sarà scontrato con la frustrante mancanza di spazio, magari quel maledetto menù orizzontale non c’è proprio modo di farlo stare. Da qui nasce l’idea del Panel, già da tempo percorribile tramite script di terze parti ma ora integrata nel framework. In pratica con un’icona normalmente collocata nell’angolo in alto a sinistra facciamo comparire, sopra la nostra pagina, un pannello che per esempio potrebbe contenere una lista di link, o in ogni caso dei contenuti a comparsa. Il codice in sé è piuttosto semplice, come sempre quando si tratta di integrare componenti esistenti.
Nell’intestazione collocheremo i soliti collegamenti alle librerie e al css. Poi predisponiamo tre pagine e un panel per navigare all’interno di esse, ovviamente questa soluzione in realtà sarebbe più utile con un numero di pagine superiore.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
Poi predisponiamo tre pagine e un panel per navigare all’interno di esse, ovviamente questa soluzione in realtà sarebbe più utile con un numero di pagine superiore.
Avranno tutte la stessa struttura che riportiamo una sola volta:
<div data-role="page" id="page1"> <div data-role="panel" id="mypanel"> <ul data-role="listview"> <li><a href="#page1">Page 1</a></li> <li><a href="#page2">Page 2</a></li> <li><a href="#page3">Page 3</a></li> </ul> </div> <div data-role="header" data-position="fixed"> <a href="#mypanel" data-icon="plus">Menu</a> <h1>Page 1</h1> </div> <div data-role="content"> <p>Page 1</p> </div> <div data-role="footer" data-position="fixed"> <h3>Footer</h3> </div> </div>
Andando a premere sull’icona del panel comparirà la listview che ci permetterà di navigare attraverso il sito.
E’ consigliabile vedere l’esito su uno smartphone, rende l’idea molto di più del solito browser
L’esempio
