jQuery Mobile: La gestione delle liste
Nel precedente articolo ci eravamo lasciati con una semplice struttura di pagine. Nella pagina interna si sarebbe dovuta trovare una rubrica.
In questo tutorial riprenderemo quella struttura e la completeremo con appunto la rubrica che realizzeremo con il supporto per le liste di jQuery Mobile.
Il risultato finale sarà quello mostrato nell’immagine sotto:
Cliccando sul nome si avrà poi accesso ai dettagli del contatto (questa parte non la svilupperemo in questo tutorial).
Vediamo come procedere: Come primo passo, riprendiamo il documento che abbiamo sviluppato nel precedente tutorial ed eliminiamo la parte che abbiamo definito come “preferiti”.
Il documento dovrebbe risultare così:
<!DOCTYPE html>
<html>
<head>
<title>jQueryMoblie</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>Questa é la home page</p>
<p>Vai alla <a href="#rubrica">Vai alla rubrica</a></p>
</div>
</div>
<div data-role="page" id="rubrica">
<div data-role="header">
<h1>Rubrica</h1>
</div>
<div data-role="content">
<!-- qui svilupperemo la nostra lista -->
</div>
</div>
</body>
</html>
Come sviluppare la lista contatti?
Ora vediamo come sviluppare la lista dei contatti. Per farlo basterà semplicemente creare una normalissima lista alla quale assegnare l’attributo data-role=”listview”.
<ul data-role="listview" data-theme="d">
<li><a href="alberto.html">Alberto</a></li>
<li><a href="aldo.html">Aldo</a></li>
<li><a href="alfonso.html">Alfonso</a></li>
<li><a href="battista.html">Battista</a></li>
<li><a href="bernardo.html">Bernardo</a></li>
</ul>
Come vedi ho aggiunto un altro attributo, data-theme che indica a jQuery Mobile quale tema (combinazione di colori) voglio applicare alla lista. Il link alla pagina dei temi é legato alla versione – in questo caso alpha 4.1 – (http://jquerymobile.com/demos/1.0a4.1/#docs/api/themes.html) ed ho paura che presto non sarà più valido.
L’attributo data-role=”listview” segnala invece a jQuery Mobile di trasformare la lista in questo modo:
Come vedi il lavoro non é ancora terminato. Ma semplicemente assegnando alla lista l’attributo data-role=”listview”, otteniamo un eccellente stile mobile con proporzioni che tengono conto dell’usabilità.
Se provi a cliccare su uno dei nomi nella lista (che rimanda ad un link che non esiste) ti accorgerai che jQuery Mobile é in grado di gestire anche una serie di errori.
Possiamo modificare il messaggio di errore, ad esempio traducendolo in italiano, andando a sovrascrivere la proprietà pageLoadErrorMessage dell’oggetto mobile. Semplicemente così
$(document).ready(function(){
$.mobile.pageLoadErrorMessage = "Errore nel caricamento della pagina";
});
Come inserire i divisori?
Ma continuiamo con lo sviluppo della rubrica. Dobbiamo ora inserire i divisori con le lettere dell’alfabeto. Questa operazione viene implementata semplicemente inserendo nella lista un elemento con attributo data-role=”list-divider”, in questo modo:
<ul data-role="listview" data-theme="d">
<li data-role="list-divider">A</li>
<li><a href="alberto.html">Alberto</a></li>
<li><a href="aldo.html">Aldo</a></li>
<li><a href="alfonso.html">Alfonso</a></li>
<li data-role="list-divider">B</li>
<li><a href="battista.html">Battista</a></li>
<li><a href="bernardo.html">Bernardo</a></li>
</ul>
A questo punto, invece di mostrare la lista in questo modo (al 100%), la mostreremo come un blocco (con dei margini) assegnando alla dichiarazione della lista (tag ul) l’attributo data-inset=”true”, ottenendo questo risultato:
Bello vero?
Ed ora il tocco finale, facciamo in modo che ogni blocco relativo ad una lettera dell’alfabeto venga mostrato separatamente.
Ovviamente per farlo creeremo tante liste quante sono le lettere. In questo modo:
<ul data-role="listview" data-theme="d" data-inset="true">
<li data-role="list-divider">A</li>
<li><a href="alberto.html">Alberto</a></li>
<li><a href="aldo.html">Aldo</a></li>
<li><a href="alfonso.html">Alfonso</a></li>
</ul>
<ul data-role="listview" data-theme="d" data-inset="true">
<li data-role="list-divider">B</li>
<li><a href="battista.html">Battista</a></li>
<li><a href="bernardo.html">Bernardo</a></li>
</ul>
Ottenendo questo risultato finale
Ed ecco la nostra pagina completa
<!DOCTYPE html>
<html>
<head>
<title>jQueryMoblie</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.mobile.pageLoadErrorMessage = "Errore nel caricamento della pagina";
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>Questa é la home page</p>
<p>Vai alla <a href="#rubrica">Vai alla rubrica</a></p>
</div>
</div>
<div data-role="page" id="rubrica">
<div data-role="header">
<h1>Lista Contatti</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="d" data-inset="true">
<li data-role="list-divider">A</li>
<li><a href="alberto.html">Alberto</a></li>
<li><a href="aldo.html">Aldo</a></li>
<li><a href="alfonso.html">Alfonso</a></li>
</ul>
<ul data-role="listview" data-theme="d" data-inset="true">
<li data-role="list-divider">B</li>
<li><a href="battista.html">Battista</a></li>
<li><a href="bernardo.html">Bernardo</a></li>
</ul>
</div>
</div>
</body>
</html>
E questa é la pagina di esempio.
Conclusione
In questo tutorial abbiamo visto con che semplicità e flessibilità possiamo gestire una lista con jQuery Mobile. Vorrei farti notare che, se escludiamo la ridefinizione del messaggio di errore (comunque superflua), non abbiamo ancora scritto una sola riga di javascript.
Finalmente nel prossimo tutorial vedremo anche qualche metodo specifico di jQuery Mobile.
Lo scenario sarà l’ottimizzazione per dispositivi mobili della pagina degli autori di YIW, di seguito uno screenshot del risultato finale:
Al clic sull’autore partirà una chiamata ajax che interrogherà il database e creerà la pagina con i dettagli dell’autore. Di che divertirsi, non mancare!
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
9 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
Davvero bravo, argomentato da 0 a 10… direi 11
E grazie…al mio unico lettore rimasto… :-)
Ottimo, mi sembra molto intuitivo e rapido fini qui… attendiamo oltre…
Sì Gleenk; la cosa più interessante di jqm é proprio la semplicità
Fantastico!! A quando l’interazione con PHP e Mysql, ad esempio per effettuare un accesso con password? ;-)
Beh, nella conclusione ho scritto che il prossimo tutorial avrà interazioni con php e mysql. Non é proprio quello che chiedevi. Ma posso anticiparti che più avanti, con le applicazioni pratiche dei form, ci sarà qualcosa di simile.
Ciao Maurizio,
sono un novizio di jquery e scusate se il problema che sto postando vi sembrerà banale ma non so come andare avanti.
utilizzo il seguente codice html:
codice:
Applicazione Web jQuery Mobile
Applicazioni mobili -> Configura Application Framework. –>
$(document).ready(function(){
//$(‘#lista1’).html(‘Pagina tre‘);
});
Pagina uno pippo
Pagina tre
Piè di pagina
La cosa che non mi è chiara è la differente visualizzazione della lista nel caso decommenti la riga:
//$(‘#lista1’).html(‘Pagina tre‘);
Nel caso di riga commentata l’elemento della lista risulta visualizzato con una freccia sul lato destro.
Tale effetto lo vorrei mantenere anche quando vado a popolare la lista dinamicamente ma se decommento la riga mostrata in precedenza l’elemento della lista appare semplicemente come un link.
Dove sbaglio.
Io mi aspettavo che i due codici fossere perfettamente uguali.
Ciao e grazie
Francesco
Ciao Francesco.
Scusa ma sinceramente non riesco a capire il tuo problema ne cosa c’entri con questo articolo. Inoltre WP si é mangiato metà del codice.
Apri una discussione sul nostro forum ed utilizza i tag per il codice che forse risulta più chiaro.
Ciao, ottimo articolo ! Vorrei però abilitare lo scroller interno della lista. Ad esempio ho una lista abbastanza corposa questa non si deve estendere su tutto lo schermo ma solo in parte…e poi fare uno scroller interno per visualizzare gli elementi al suo interno.