Jquery Mobile e design adattivo: febbraio 2014

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.

Di seguito il codice standard per una pagina in jQuery Mobile 1.4 (la nuovissima versione di questo interessante framework).

Le novità sono molte e nei prossimi post vi parlerò nel dettaglio della nuova sintassi e di come realizzare le proprie pagine in modo che siano compatibili con questa nuova update.

La nuova versione ha risolto problemi di compatibilità con versioni più vecchie dei browser "desktop" (explorer in particolare, che rimane un osso duro quando si vuole visualizzare correttamente le pagine) e ha aggiunto nuove utili funzionalità oltre che bugfix vari che migliorano la performance delle pagine.

E' stato fatto, tra l'altro, un lavoro di "alleggerimento" per cercare di ottenere tempi di caricamento più rapidi.

Da notare il charset ISO-8859-1 che è consigliabile per caratteri vari accentati in Italiano, preferibile all'UTF-8.

<!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>

NB i link a fogli di stile CSS e javascript necessari puntano direttamente a jquery.com, per cui non è necessario ospitare sul proprio server nessuno di questi file.

Si tratta di una pagina di base senza CSS personalizzati nè temi aggiuntivi, ed è utile per chiunque voglia avere immediatamente pagine perfettamente funzionanti senza dover ospitare nel proprio sito i vari .css e .js, senza rischiare di perdersi nei path dei vari file e cartelle, con tutti i problemi che ne derivano.

Jquery Mobile e design adattivo

Translate

sabato 15 febbraio 2014

jQuery Mobile 1.4 - Creare un pannello laterale a scomparsa

lunedì 10 febbraio 2014

jQuery Mobile 1.4 codice standard per le pagine