Nella nuova versione 1.4 è possibile utilizzare l'interessante funzionalità del pannello laterale a scomparsa, utile soprattutto per i cellulari che hanno una risoluzione inferiore.
Ecco il codice standard già citato nel mio post precedente:
<!DOCTYPE html>
<html>
<head>
<title>Pagina in jQuery Mobile 1.4.0</title>
<meta charset="ISO-8859-1"><!--per html5-->
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"><!-- pre-html5 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Partendo da questo codice, andiamo ora ad aggiungere nell'header il pulsante "bars" contenente il link al pannello laterale a scomparsa, con la seguente riga di codice:
<a class="ui-shadow-icon ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-bars ui-btn-icon-notext" href="#left-panel" ></a>
Abbiamo così creato nella barra superiore (header) l'icona che cliccata aprirà il pannello a scomparsa.
Notare la differenza di sintassi rispetto alle precedenti versioni di jquery. Qui, infatti, nella classe di <a> si inserisce direttamente tutto ciò che riguarda l'icona (ombra, angoli arrotondati, pulsante inline, tipo di icona, etc).
Notare anche nell'href il richiamo all'elemento con id "left-panel" che andremo poi a inserire prima dell'header, ovvero subito dopo l'apertura del <div data role="page">.
Ecco il codice del pannello laterale sinistro:
<div data-role="panel" id="left-panel" data-theme="a">
<ul data-role="listview" data-theme="a">
<li data-icon="delete"><a href="#" data-rel="close">Chiudi</a></li>
<li data-role="list-divider" data-theme="a"></li>
<li data-theme="b"><a href="#">Home</a></li>
<li data-theme="a"><a href="#">Pagina 1</a></li>
<li data-theme="a"><a href="#">Pagina 2</a></li>
<li data-theme="a"><a href="#">Pagina 3</a></li>
</ul>
</div><!--/panel-->
Bene, ora assembliamo il tutto:
<!DOCTYPE html>
<html>
<head>
<title>Pagina in jQuery Mobile 1.4.0</title>
<meta charset="ISO-8859-1"><!--per html5-->
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"><!-- pre-html5 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="panel" id="left-panel" data-theme="a">
<ul data-role="listview" data-theme="a">
<li data-icon="delete"><a href="#" data-rel="close">Chiudi</a></li>
<li data-role="list-divider" data-theme="a"></li>
<li data-theme="b"><a href="#">Home</a></li>
<li data-theme="a"><a href="#">Pagina 1</a></li>
<li data-theme="a"><a href="#">Pagina 2</a></li>
<li data-theme="a"><a href="#">Pagina 3</a></li>
</ul>
</div><!--/panel-->
<div data-role="header">
<a class="ui-shadow-icon ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-bars ui-btn-icon-notext" href="#left-panel" ></a>
<h1>Page Title</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Contenuto della pagina</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
E il gioco è fatto! Abbiamo un pannello laterale a scomparsa, molto più funzionale dei bottoni che fluttuano qua e là per lo schermo, a seconda della risoluzione del dispositivo usato.
