Logo TouraineVerte

jQueryMobile pour mobiles smartphones tablettes

Conventions de codage applicables aux listes jQueryMobile

Google Maps API Web Services

Vous avez trouvé ce tutoriel intéressant ? Recommandez le en cliquant sur le bouton +1    

Coder une liste avec data-role='listview'

Tutoriel publié le et mis à jour le
Tutoriel en Français

Liste de liens basique

Une liste est codée comme une simple liste non ordonnée contenant des éléments liés à une liste avec l'attribut data-role="listview". jQuery Mobile appliquera tous les styles nécessaires pour transformer cette liste en vue de liste mobile conviviale avec un indicateur d'une flèche vers la droite, et qui remplit toute la largeur de la fenêtre de navigateur. Lorsque vous appuyez sur l'élément de liste, le framework va déclencher un clic sur le premier lien à l'intérieur de l'élément de la liste, puis émettre une requête AJAX de l'URL dans le lien, créer la nouvelle page dans les DOM, puis lancer une transition de page. Regardez la reference de data- attribute pour voir tous les attributs possibles que vous pouvez ajouter aux listes.

Note de style sur les listes non-intégrées : Pour tout le standard, les listes non-intégrées ont une marge de -15px pour contrer le 15px d'espacement dans la zone de contenu afin que les listes soient remplies jusqu'au bord de l'écran. Si vous ajoutez d'autres widgets au dessus ou en dessous d'une liste, la marge négative peut faire que ces éléments se chevauchent, ainsi vous aurez besoin d'ajouter un espacement supplémentaire dans votre CSS personnalisé.

Voici le balisage HTML pour une liste de base chainées.

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Exemple de liste basique</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	</head> 
	<body> 
		<div data-role="page">
			<div data-role="header">
				<h1>Exemple de liste basique</h1>
			</div><!-- /header -->
			<div data-role="content">	
				<ul data-role="listview">
					<li><a href="index.html">Acura</a></li>
					<li><a href="index.html">Audi</a></li>
					<li><a href="index.html">BMW</a></li>
					<li><a href="index.html">Cadillac</a></li>
					<li><a href="index.html">Chrysler</a></li>
					<li><a href="index.html">Dodge</a></li>
					<li><a href="index.html">Ferrari</a></li>
					<li><a href="index.html">Ford</a></li>
					<li><a href="index.html">GMC</a></li>
					<li><a href="index.html">Honda</a></li>
					<li><a href="index.html">Hyundai</a></li>
					<li><a href="index.html">Infiniti</a></li>
					<li><a href="index.html">Jeep</a></li>
					<li><a href="index.html">Kia</a></li>
					<li><a href="index.html">Lexus</a></li>
					<li><a href="index.html">Mini</a></li>
					<li><a href="index.html">Nissan</a></li>
					<li><a href="index.html">Porsche</a></li>
					<li><a href="index.html">Subaru</a></li>
					<li><a href="index.html">Toyota</a></li>
					<li><a href="index.html">Volkswagon</a></li>
					<li><a href="index.html">Volvo</a></li>
				</ul>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Exemple de liste de liens basique.

Listes imbriquées

En intégrant des ul ou ol enfant à l'intérieur des éléments de liste, vous pouvez créer des listes imbriquées. Lorsqu'un élément de liste contenant une liste d'enfants est cliqué, le framework va générer une nouvelle ui-page peuplée avec le titre de l'entête parent et la liste des éléments enfants. Ces listes dynamiques imbriquées sont stylisées avec l'échantillon "b" du thème (bleu dans le thème par défaut) pour indiquer que vous êtes dans un niveau secondaire de navigation. Les listes peuvent être imbriquées sur plusieurs niveaux de profondeur et tous les pages et les liens seront gérées automatiquement par le framework.

Pour définir la couleur de l'échantillon d'une liste enfant, mettez l'attribut data-theme à l'intérieur de chaque liste.

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Exemple de listes imbriquées</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	</head> 
	<body> 
		<div data-role="page">
			<div data-role="header">
				<h1>Exemple de listes imbriquées</h1>
			</div><!-- /header -->
			<div data-role="content">	
				<ul data-role="listview">
					<li>
						<h3>Animaux</h3>
						<p>Tous vos animaux favoris de l´aarkvark au zébre.</p>
					
						<ul>
							<li>Animaux de compagnie
								<ul>
									<li><a href="index.html">Canari</a></li>
									<li><a href="index.html">Chat</a></li>
									<li><a href="index.html">Chien</a></li>
									<li><a href="index.html">Gerbille</a></li>
									<li><a href="index.html">Iguane</a></li>
									<li><a href="index.html">Souris</a></li>
								</ul>
							</li>
							<li>Animaux de la ferme
								<ul>
									<li><a href="index.html">Canard</a></li>
									<li><a href="index.html">Cheval</a></li>
									<li><a href="index.html">Cochon</a></li>
									<li><a href="index.html">Mouton</a></li>
									<li><a href="index.html">Poulet</a></li>
									<li><a href="index.html">Vache</a></li>
								</ul>
							</li>
							<li>Animaux sauvages
								<ul>
									<li><a href="index.html">Aardvark</a></li>
									<li><a href="index.html">Aigle</a></li>
									<li><a href="index.html">Alligator</a></li>
									<li><a href="index.html">Castor</a></li>
									<li><a href="index.html">Dingo</a></li>
									<li><a href="index.html">Eléphant</a></li>
									<li><a href="index.html">Fourmi</a></li>
									<li><a href="index.html">Furet</a></li>
									<li><a href="index.html">Giraffe</a></li>
									<li><a href="index.html">Grenouille</a></li>
									<li><a href="index.html">Lion</a></li>
									<li><a href="index.html">Ours</a></li>
									<li><a href="index.html">Ours polaire</a></li>
									<li><a href="index.html">Panda</a></li>
									<li><a href="index.html">Puma</a></li>
									<li><a href="index.html">Singe</a></li>
									<li><a href="index.html">Tigre</a></li>
									<li><a href="index.html">Zébre</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li>

						<h3>Couleurs</h3>
						<p>Les couleurs de l´arc en ciel.</p>
			
						<ul>
							<li><a href="index.html">Bleu</a></li>
							<li><a href="index.html">Vert</a></li>
							<li><a href="index.html">Orange</a></li>
							<li><a href="index.html">Pourpre</a></li>
							<li><a href="index.html">Rouge</a></li>
							<li><a href="index.html">Jaune</a></li>
							<li><a href="index.html">Violet</a></li>
						</ul>
					</li>
					<li>
						<h3>Véhicules</h3>
						<p>Tous, des voitures aux avions.</p>
						
						<ul>
							<li>Voitures
								<ul>
									<li><a href="index.html">Acura</a></li>
									<li><a href="index.html">Audi</a></li>
									<li><a href="index.html">BMW</a></li>
									<li><a href="index.html">Cadillac</a></li>
									<li><a href="index.html">Chrysler</a></li>
									<li><a href="index.html">Dodge</a></li>
									<li><a href="index.html">Ferrari</a></li>
									<li><a href="index.html">Ford</a></li>
									<li><a href="index.html">GMC</a></li>
									<li><a href="index.html">Honda</a></li>
									<li><a href="index.html">Hyundai</a></li>
									<li><a href="index.html">Infiniti</a></li>
									<li><a href="index.html">Jeep</a></li>
									<li><a href="index.html">Kia</a></li>
									<li><a href="index.html">Lexus</a></li>
									<li><a href="index.html">Mini</a></li>
									<li><a href="index.html">Nissan</a></li>
									<li><a href="index.html">Porsche</a></li>
									<li><a href="index.html">Subaru</a></li>
									<li><a href="index.html">Toyota</a></li>
									<li><a href="index.html">Volkswagon</a></li>
									<li><a href="index.html">Volvo</a></li>
								</ul>
							</li>
							<li>Avions
								<ul>
									<li><a href="index.html">Boeing</a></li>
									<li><a href="index.html">Cessna</a></li>
									<li><a href="index.html">Derringer</a></li>
									<li><a href="index.html">Embraer</a></li>
									<li><a href="index.html">Gulfstream</a></li>
									<li><a href="index.html">Piper Aircraft</a></li>
									<li><a href="index.html">Raytheon</a></li>
								</ul>
							</li>
							<li>Construction
								<ul>
									<li><a href="index.html">Caterpillar</a></li>
									<li><a href="index.html">Ford</a></li>
									<li><a href="index.html">John Deere</a></li>

								</ul>
							</li>				
						</ul>
					</li>
				</ul>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Exemple de listes imbriquées.

Listes numérotées

Les listes peuvent également être créées à partir des listes ordonnées (ol) ce qui est utile lorsque les éléments représentés sont dans une séquence tel que les résultats de recherche ou une file d'attente de cinéma. Lorsque le balisage amélioré est appliqué à la vue de la liste, jQuery Mobile essayera d'abord utiliser les CSS pour ajouter des numéros à la liste et s'il n'est pas pris en charge, il se retournera vers l'injection de numéros avec JavaScript.

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Exemple de liste numérotée</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	</head> 
	<body> 
		<div data-role="page">
			<div data-role="header">
				<h1>Exemple de liste numérotée</h1>
			</div><!-- /header -->
			<div data-role="content">	
				<ol data-role="listview">
					<li><a href="index.html">The Godfather</a></li>
					<li><a href="index.html">Inception</a></li>
					<li><a href="index.html">The Good, the Bad and the Ugly </a></li>
					<li><a href="index.html">Pulp Fiction</a></li>
					<li><a href="index.html">Schindler´s List</a></li>
					<li><a href="index.html">12 Angry Men</a></li>
					<li><a href="index.html">One Flew Over the Cuckoo´s Nest</a></li>
					<li><a href="index.html">Star Wars: Episode V - The Empire Strikes Back</a></li>
					<li><a href="index.html">The Dark Knight</a></li>
					<li><a href="index.html">The Lord of the Rings: The Return of the King</a></li>
					<li><a href="index.html">Seven Samurai</a></li>
					<li><a href="index.html">Star Wars: Episode IV - A New Hope</a></li>
					<li><a href="index.html">Casablanca</a></li>
					<li><a href="index.html">Goodfellas </a></li>
					<li><a href="index.html">Toy Story 3</a></li>
					<li><a href="index.html">Fight Club</a></li>
					<li><a href="index.html">City of God</a></li>
					<li><a href="index.html">The Lord of the Rings: The Fellowship of the Ring</a></li>
					<li><a href="index.html">The Big Lebowski</a></li>
					<li><a href="index.html">Psycho</a></li>
				</ol>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Exemple de liste numérotée.

Listes en lecture seule

Les vues de liste peuvent aussi être utilisées pour afficher une liste non-interactive d'éléments, généralement sous forme de liste incorporée. Cette liste est construite à partir d'une liste non ordonnée ou ordonnée qui n'a pas d'élément de la liste lié. Le framework par défaut stylise cette liste avec l'échantillon "c" du thème et définit la taille du texte à une taille plus petite que les listes cliquables pour économiser un peu d'espace.

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Exemple de liste en lecture seule</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	</head> 
	<body> 
		<div data-role="page">
			<div data-role="header">
				<h1>Exemple de liste en lecture seule</h1>
			</div><!-- /header -->
			<div data-role="content">	
				<h2>Liste simple</h2>
				<ul data-role="listview" data-inset="true">
					<li>Acura</li>
					<li>Audi</li>
					<li>BMW</li>
					<li>Cadillac</li>
					<li>Ferrari</li>
				</ul>

				<h2>Compteur à bulle</h2>
				<ul data-role="listview" data-inset="true">
					<li>Inbox <span class="ui-li-count">12</span></li>
						<li>Outbox <span class="ui-li-count">0</span></li>
						<li>Drafts <span class="ui-li-count">4</span></li>
						<li>Sent <span class="ui-li-count">328</span></li>
						<li>Trash <span class="ui-li-count">62</span></li>
				</ul>
			
				<h2>Liste numérotée</h2>
				<ol data-role="listview" data-inset="true">
					<li>The Godfather</li>
					<li>Inception</li>
					<li>The Good, the Bad and the Ugly </li>
					<li>Pulp Fiction</li>
					<li>Schindler´s List</li>
				</ol>
				
				<h2>Contenu séparé et formaté</h2>
				<ul data-role="listview" data-inset="true">
					<li>
						<h3>Stephen Weber</h3>
						<p><strong>You´ve been invited to a meeting at Filament Group in Boston, MA</strong></p>
						<p>Hey Stephen, if you´re available at 10am tomorrow, we´ve got a meeting with the jQuery team.</p>
						<p class="ui-li-aside"><strong>6:24</strong>PM</p>
					</li>
					<li>
						<h3>jQuery Team</h3>
						<p><strong>Boston Conference Planning</strong></p>
						<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
						<p class="ui-li-aside"><strong>9:18</strong>AM</p>
					</li>
				</ul>
			
				<h2>Liste avec icônes</h2>
				<ul data-role="listview" data-inset="true">
					<li><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></li>
					<li><img src="images/de.png" alt="Germany" class="ui-li-icon">Allemagne <span class="ui-li-count">4</span></li>
					<li><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Grande Bretagne<span class="ui-li-count">0</span></li>
					<li><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finlande <span class="ui-li-count">12</span></li>
					<li><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norvège <span class="ui-li-count">328</span></li>
					<li><img src="images/us.png" alt="United States" class="ui-li-icon">Etats Unis <span class="ui-li-count">62</span></li>
				</ul>
			
				<h2>Liste avec miniatures</h2>
				<ul data-role="listview" data-inset="true">
					<li>
						<img src="images/album-bb.jpg" />
						<h3>Broken Bells</h3>
						<p>Broken Bells</p>
					</li>
					<li>
						<img src="images/album-hc.jpg" />
						<h3>Warning</h3>
						<p>Hot Chip</p>
					</li>
					<li>
						<img src="images/album-p.jpg" />
						<h3>Wolfgang Amadeus Phoenix</h3>
						<p>Phoenix</p>
					</li>
				</ul>
				
				<h2>Liste avec catégorie et filtrable</h2>
				<ul data-role="listview" data-filter="true" data-inset="true">
					<li data-role="list-divider">A</li>
					<li>Adam Kinkaid</li>
					<li>Alex Wickerham</li>
					<li>Avery Johnson</li>
					<li data-role="list-divider">B</li>
					<li>Bob Cabot</li>
					<li data-role="list-divider">C</li>
					<li>Caleb Booth</li>
					<li>Christopher Adams</li>
				</ul>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Exemple de liste en lecture seule.

Listes avec boutons séparés

Dans les cas où il y a plus d'une action possible par élément de la liste, un bouton séparé peut être utilisé pour offrir deux éléments indépendamment cliquable - l'élément de liste et une petite icône de flèche à l'extrême droite. Pour faire un élément séparé de la liste, il suffit d'ajouter un second lien à l'intérieur du li et le framework va ajouter une ligne de séparation verticale et styliser le lien comme une flèche d'icône seule et définir l'attribut title du lien vers le texte du lien pour l'accessibilité.

Vous pouvez définir l'icône pour l'icône séparé à droite en spécifiant un attribut data-split-icon avec le nom de l'icône que vous voulez. La couleur de l'échantillon du thème du bouton séparé peut être réglé en spécifiant une lettre d'échantillon dans l'attribut data-split-theme.

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Exemple de listes imbriquées</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	</head> 
	<body> 
		<div data-role="page">
			<div data-role="header">
				<h1>Exemple de listes imbriquées</h1>
			</div><!-- /header -->
			<div data-role="content">	
				<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
					<li>
						<a href="index.html">
							<img src="images/album-bb.jpg" />
							<h3>Broken Bells</h3>
							<p>Broken Bells</p>
						</a>
						<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
					</li>
					<li>
						<a href="index.html">
							<img src="images/album-hc.jpg" />
							<h3>Warning</h3>
							<p>Hot Chip</p>
						</a>
						<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
					</li>
					<li>
						<a href="index.html">
							<img src="images/album-p.jpg" />
							<h3>Wolfgang Amadeus Phoenix</h3>
							<p>Phoenix</p>
						</a>
						<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
					</li>
					<li>
						<a href="index.html">
							<img src="images/album-ok.jpg" />
							<h3>Of The Blue Colour Of The Sky</h3>
							<p>Ok Go</p>
						</a>
						<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
					</li>
					<li>
						<a href="index.html">
							<img src="images/album-ws.jpg" />
							<h3>Elephant</h3>
							<p>The White Stripes</p>
						</a>
						<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
					</li>
					<li>
						<a href="index.html">
							<img src="images/album-rh.jpg" />
							<h3>Kid A</h3>
							<p>Radiohead</p>
						</a>
						<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
					</li>
					<li>
						<a href="index.html">
							<img src="images/album-xx.jpg" />
							<h3>XX</h3>
							<p>XX</p>
						</a>
						<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
					</li>
					<li>
						<a href="index.html">
							<img src="images/album-mg.jpg" />
							<h3>Congratulations</h3>
							<p>MGMT</p>
						</a>
						<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
					</li>
					<li>
						<a href="index.html">
							<img src="images/album-ag.jpg" />
							<h3>Ashes Grammar</h3>
							<p>A Sunny Day in Glasgow</p>
						</a>
						<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
					</li>
					<li>
						<a href="index.html">
							<img src="images/album-k.jpg" />
							<h3>Hot Fuss</h3>
							<p>Killers</p>
						</a>
						<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
					</li>
					<li>
						<a href="index.html">	
							<img src="images/album-af.jpg" />
							<h3>The Suburbs</h3>
							<p>Arcade Fire</p>
						</a>
						<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
					</li>
				</ul>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Exemple de liste séparée.

Liste et séparateur

Les éléments de la liste peuvent être transformés en séparateur pour organiser et regrouper les éléments de la liste. Ceci est fait en ajoutant le data-role="list-divider" à tout élément de la liste. Ces éléments sont stylisés par défaut avec le corps de l'échantillon "b" (light gray dans le thème par défaut) mais vous pouvez spécifier un thème pour les séparateurs en ajoutant l'attribut data-dividertheme à l'élément de la liste (ul ou oll) et en spécifiant une lettre d'échantillon.

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Exemple de liste avec catégorie</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	</head> 
	<body> 
		<div data-role="page">
			<div data-role="header">
				<h1>Exemple de liste avec catégorie</h1>
			</div><!-- /header -->
			<div data-role="content">	
				<ul data-role="listview">
					<li data-role="list-divider">A</li>
					<li><a href="index.html">Adam Kinkaid</a></li>
					<li><a href="index.html">Alex Wickerham</a></li>
					<li><a href="index.html">Avery Johnson</a></li>
					<li data-role="list-divider">B</li>
					<li><a href="index.html">Bob Cabot</a></li>
					<li data-role="list-divider">C</li>
					<li><a href="index.html">Caleb Booth</a></li>
					<li><a href="index.html">Christopher Adams</a></li>
					<li><a href="index.html">Culver James</a></li>
					<li data-role="list-divider">D</li>
					<li><a href="index.html">David Walsh</a></li>
					<li><a href="index.html">Drake Alfred</a></li>
					<li data-role="list-divider">E</li>
					<li><a href="index.html">Elizabeth Bacon</a></li>
					<li><a href="index.html">Emery Parker</a></li>
					<li><a href="index.html">Enid Voldon</a></li>
					<li data-role="list-divider">F</li>
					<li><a href="index.html">Francis Wall</a></li>
					<li data-role="list-divider">G</li>
					<li><a href="index.html">Graham Smith</a></li>
					<li><a href="index.html">Greta Peete</a></li>
					<li data-role="list-divider">H</li>
					<li><a href="index.html">Harvey Walls</a></li>
					<li data-role="list-divider">M</li>
					<li><a href="index.html">Mike Farnsworth</a></li>
					<li><a href="index.html">Murray Vanderbuilt</a></li>
					<li data-role="list-divider">N</li>
					<li><a href="index.html">Nathan Williams</a></li>
					<li data-role="list-divider">P</li>
					<li><a href="index.html">Paul Baker</a></li>
					<li><a href="index.html">Pete Mason</a></li>
					<li data-role="list-divider">R</li>
					<li><a href="index.html">Rod Tarker</a></li>
					<li data-role="list-divider">S</li>
					<li><a href="index.html">Sawyer Wakefield</a></li>
				</ul>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Exemple de séparateur de liste.

Filtre de recherche

jQuery Mobile fournit un moyen très facile de filtrer une liste avec une fonction de recherche simple, côté client. Pour faire une liste filtrable, ajoutez simplement l'attribut data-filter="true" à la liste. Le framework ajoutera ensuite une boîte de recherche au dessus de la liste et ajoutera le comportement de filtre aux éléments de la liste qui ne contiennent pas la chaîne de recherche saisie par l'utilisateur. Le texte par défaut du placeholder est "Filter items...". Pour configurer le texte du placeholder dans la saisie de recherche, vous pouvez soit lier l'événement mobileinit et définir l'option $.mobile.listview.prototype.options.filterPlaceholder avec une chaîne de votre choix ou utiliser le data-attribute data-filter-placeholder sur votre liste. Par défaut la boîte de recherche va hériter du thème de son parent. Le thème de la boîte de recherche peut être configurée en utilisant le data-attribute data-filter-theme sur votre liste.

Voir le résultat : Exemple de filtre de recherche

Si vous voulez changer la manière dont les éléments de la liste sont filtrés, à savoir une recherche floue ou correspondant au début de la chaîne, vous pouvez configurer la fonction de rappel utilisée en interne par la définition $.mobile.listview.prototype.options.filterCallback durant le mobileinit ou après que le widget soit créé avec$("#maliste").listview('option', 'filterCallback', yourFilterFunction). Toute fonction définie pour la fonction de rappel fournira deux arguments. Tout d'abord, le texte de l'élément de la liste actuelle puis la valeur recherchée. Une valeur exacte aboutira à un élément de liste caché. La fonction de rappel par défaut qui filtre les entrées sans le searchValue , fait cela comme une sous-chaîne qui est décrite ci-dessous :

function( text, searchValue ){
	return text.toLowerCase().indexOf( searchValue ) === -1;
};

Pour filtrer les éléments de la liste par des valeurs autres que le texte, ajoutez un attribut data-filtertext à l'élément de la liste. La valeur de cet attribut sera passée comme premier argument de la fonction filterCallback à la place du texte.

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Exemple de liste avec barre de rechercher filtrante</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	</head> 
	<body> 
		<div data-role="page">
			<div data-role="header">
				<h1>Exemple de liste avec barre de rechercher filtrante</h1>
			</div><!-- /header -->
			<div data-role="content">	
				<ul data-role="listview" data-filter="true">
					<li><a href="index.html">Acura</a></li>
					<li><a href="index.html">Audi</a></li>
					<li><a href="index.html">BMW</a></li>
					<li><a href="index.html">Cadillac</a></li>
					<li><a href="index.html">Chrysler</a></li>
					<li><a href="index.html">Dodge</a></li>
					<li><a href="index.html">Ferrari</a></li>
					<li><a href="index.html">Ford</a></li>
					<li><a href="index.html">GMC</a></li>
					<li><a href="index.html">Honda</a></li>
					<li><a href="index.html">Hyundai</a></li>
					<li><a href="index.html">Infiniti</a></li>
					<li><a href="index.html">Jeep</a></li>
					<li><a href="index.html">Kia</a></li>
					<li><a href="index.html">Lexus</a></li>
					<li><a href="index.html">Mini</a></li>
					<li><a href="index.html">Nissan</a></li>
					<li><a href="index.html">Porsche</a></li>
					<li><a href="index.html">Subaru</a></li>
					<li><a href="index.html">Toyota</a></li>
					<li><a href="index.html">Volkswagon</a></li>
					<li><a href="index.html">Volvo</a></li>
				</ul>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Exemple de filtre des données masquées.

Formatage du texte et compteur

Le framework inclut les conventions de formatage du texte pour les modèles de liste commune, comme l'entête/les descriptions, les informations secondaires, les compteurs grâce au balisage sémantique de l'HTML.

  • Pour ajouter un indicateur de comptage à la droite de l'élément de la liste, enveloppez le nombre dans un élément avec une classe de ui-li-count.
  • Pour ajouter la hiérarchie du texte, utiliser des titres pour augmenter la police et utilisez les paragraphes pour réduire la police.
  • Des informations supplémentaires peuvent être ajoutées à la droite de chaque élément de la liste en enveloppant le contenu dans un élément avec une classe de ui-li-aside.

Liste avec compteur à bulle

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Exemple de liste avec compteur à bulle</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	</head> 
	<body> 
		<div data-role="page">
			<div data-role="header">
				<h1>Exemple de liste avec compteur à bulle</h1>
			</div><!-- /header -->
			<div data-role="content">	
				<ul data-role="listview">
					<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
					<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
					<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
					<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
					<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
				</ul>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Liste des bulles de compteur.

Liste avec texte formaté

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Exemple de liste avec texte formaté</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	</head> 
	<body> 
		<div data-role="page">
			<div data-role="header">
				<h1>Exemple de liste avec texte formaté</h1>
			</div><!-- /header -->
			<div data-role="content">	
				<ul data-role="listview">
					<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
					<li>
						<a href="index.html">
							<h3>Stephen Weber</h3>
							<p><strong>You´ve been invited to a meeting at Filament Group in Boston, MA</strong></p>
							<p>Hey Stephen, if you´re available at 10am tomorrow, we´ve got a meeting with the jQuery team.</p>
							<p class="ui-li-aside"><strong>6:24</strong>PM</p>
						</a>
					</li>
					<li>
						<a href="index.html">
							<h3>jQuery Team</h3>
							<p><strong>Boston Conference Planning</strong></p>
							<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
							<p class="ui-li-aside"><strong>9:18</strong>AM</p>
						</a>
					</li>
					<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
					<li>
						<a href="index.html">
							<h3>Avery Walker</h3>
							<p><strong>Re: Dinner Tonight</strong></p>
							<p>Sure, let´s plan on meeting at Highland Kitchen at 8:00 tonight. Can´t wait! </p>
							<p class="ui-li-aside"><strong>4:48</strong>PM</p>
						</a>
					</li>
					<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
					<li>
						<a href="index.html">
							<h3>Amazon.com</h3>
							<p><strong>4-for-3 Books for Kids</strong></p>
							<p>As someone who has purchased children´s books from our 4-for-3 Store, you may be interested in these featured books.</p>
							<p class="ui-li-aside"><strong>12:47</strong>PM</p>
						</a>
					</li>
					<li>
						<a href="index.html">
							<h3>Mike Taylor</h3>
							<p><strong>Re: This weekend in Maine</strong></p>
							<p>Hey little buddy, sorry but I can´t make it up to vacationland this weekend. Maybe next weekend?</p>
							<p class="ui-li-aside"><strong>6:24</strong>AM</p>
						</a>
					</li>
					<li>
						<a href="index.html">
							<h3>Redfin</h3>
							<p><strong>Redfin listing updates for today</strong></p>
							<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
							<p class="ui-li-aside"><strong>5:52</strong>AM</p>
						</a>
					</li>
					<li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
					<li>
						<a href="index.html">
							<h3>Angela Smith</h3>
							<p><strong>Link Request</strong></p>
							<p>My name is Angela Smith, SEO Consultant. I´ve greatly enjoyed looking through your site and I was wondering if you´d be interested in providing a link</p>
							<p class="ui-li-aside"><strong>6:24</strong>AM</p>
						</a>
					</li>
					<li>
						<a href="index.html">
							<h3>Mike Taylor</h3>
							<p><strong>This weekend in Maine</strong></p>
							<p>Sounds good, let me check into our plans.</p>
							<p class="ui-li-aside"><strong>6:24</strong>AM</p>
						</a>
					</li>
				</ul>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat :Liste avec du texte formaté.

Icônes & Miniatures

Pour ajouter des miniatures à la gauche d'un élément de la liste, il suffit d'ajouter une image à l'intérieur d'un élément de liste comme le premier élément enfant. Le framework redimensionne l'image à 80 pixels de chaque côté. Pour utiliser les icônes standard 16x16 pixels dans les éléments d'une liste, ajoutez la classe de ui-li-icon à l'élément image.

Liste avec miniatures

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Exemple de liste avec image miniature</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	</head> 
	<body> 
		<div data-role="page">
			<div data-role="header">
				<h1>Exemple de liste avec image miniature</h1>
			</div><!-- /header -->
			<div data-role="content">	
				<ul data-role="listview">
					<li><a href="index.html">
						<img src="images/album-bb.jpg" />
						<h3>Broken Bells</h3>
						<p>Broken Bells</p>
					</a></li>
					<li><a href="index.html">
						<img src="images/album-hc.jpg" />
						<h3>Warning</h3>
						<p>Hot Chip</p>
					</a></li>
					<li><a href="index.html">
						<img src="images/album-p.jpg" />
						<h3>Wolfgang Amadeus Phoenix</h3>
						<p>Phoenix</p>
					</a></li>
					<li><a href="index.html">
						<img src="images/album-ok.jpg" />
						<h3>Of The Blue Colour Of The Sky</h3>
						<p>Ok Go</p>
					</a></li>
					<li><a href="index.html">
						<img src="images/album-ws.jpg" />
						<h3>Elephant</h3>
						<p>The White Stripes</p>
					</a></li>
					<li><a href="index.html">
						<img src="images/album-rh.jpg" />
						<h3>Kid A</h3>
						<p>Radiohead</p>
					</a></li>
					<li><a href="index.html">
						<img src="images/album-xx.jpg" />
						<h3>XX</h3>
						<p>XX</p>
					</a></li>
					<li><a href="index.html">
						<img src="images/album-mg.jpg" />
						<h3>Congratulations</h3>
						<p>MGMT</p>
					</a></li>
					
					<li><a href="index.html">
						<img src="images/album-ag.jpg" />
						<h3>Ashes Grammar</h3>
						<p>A Sunny Day in Glasgow</p>
					</a></li>
					
					<li><a href="index.html">
						<img src="images/album-k.jpg" />
						<h3>Hot Fuss</h3>
						<p>Killers</p>
					</a></li>
					<li><a href="index.html">	
						<img src="images/album-af.jpg" />
						<h3>The Suburbs</h3>
						<p>Arcade Fire</p>
					</a></li>
				</ul>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Liste avec des images miniatures.

Liste avec icônes

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Exemple de liste avec icône image</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	</head> 
	<body> 
		<div data-role="page">
			<div data-role="header">
				<h1>Exemple de liste avec icône image</h1>
			</div><!-- /header -->
			<div data-role="content">	
				<ul data-role="listview">
					<li><a href="index.html"><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></a></li>
					<li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
					<li><a href="index.html"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
					<li><a href="index.html"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
					<li><a href="index.html"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
					<li><a href="index.html"><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></a></li>
				</ul>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Liste avec des images d'icône.

Listes intégrées

Si les listes sont intégrés dans une page avec d'autres types de contenu, une liste intégrée positionne la liste dans un bloc qui se trouve à l'intérieur de la zone de contenu avec un peu de marge et les coins arrondis (thème contrôlée). En ajoutant l'attribut data-inset="true" à la liste (ul ou ol), cela applique l'apparence intégrée.

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Exemple de liste en médaillon stylisée</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	</head> 
	<body> 
		<div data-role="page">
			<div data-role="header">
				<h1>Exemple de liste en médaillon stylisée</h1>
			</div><!-- /header -->
			<div data-role="content">	
				<form>
					<h2>Liste simple</h2>
						<ul data-role="listview" data-inset="true">
							<li><a href="index.html">Acura</a></li>
							<li><a href="index.html">Audi</a></li>
							<li><a href="index.html">BMW</a></li>
							<li><a href="index.html">Cadillac</a></li>
							<li><a href="index.html">Ferrari</a></li>
						</ul>

					<h2>Compteur à bulle</h2>
						<ul data-role="listview" data-inset="true">
							<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
							<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
							<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
							<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
							<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
						</ul>
					
					<h2>Liste numérotée</h2>
						<ol data-role="listview" data-inset="true">
							<li><a href="index.html">The Godfather</a></li>
							<li><a href="index.html">Inception</a></li>
							<li><a href="index.html">The Good, the Bad and the Ugly </a></li>
							<li><a href="index.html">Pulp Fiction</a></li>
							<li><a href="index.html">Schindler´s List</a></li>
						</ol>
						
					<h2>Liste au contenu formaté et divisé</h2>
						<ul data-role="listview" data-inset="true">
							<li><a href="index.html">
								<h3>Stephen Weber</h3>
								<p><strong>You´ve been invited to a meeting at Filament Group in Boston, MA</strong></p>
								<p>Hey Stephen, if you´re available at 10am tomorrow, we´ve got a meeting with the jQuery team.</p>
								<p class="ui-li-aside"><strong>6:24</strong>PM</p>
							</a></li>
							<li><a href="index.html">
								<h3>jQuery Team</h3>
								<p><strong>Boston Conference Planning</strong></p>
								<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
								<p class="ui-li-aside"><strong>9:18</strong>AM</p>
							</a></li>
						</ul>
					
					<h2>Liste avec icônest</h2>
						<ul data-role="listview" data-inset="true">
							<li><a href="index.html"><img src="images/gf.png" alt="France" class="ui-li-icon ui-corner-none">France <span class="ui-li-count">4</span></a></li>
							<li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
							<li><a href="index.html"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
							<li><a href="index.html"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
							<li><a href="index.html"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
							<li><a href="index.html"><img src="images/us.png" alt="United States" class="ui-li-icon ui-corner-none">United States <span class="ui-li-count">62</span></a></li>
						</ul>
					
					<h2>Liste avec bouton partagé et vignettes</h2>
						<ul data-role="listview" data-inset="true">
							<li>
								<a href="index.html">
									<img src="images/album-bb.jpg" />
									<h3>Broken Bells</h3>
									<p>Broken Bells</p>
								</a>
								<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
							</li>
							<li>
								<a href="index.html">
								<img src="images/album-hc.jpg" />
								<h3>Warning</h3>
								<p>Hot Chip</p>
								</a>
								<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
							</li>
							<li>
								<a href="index.html">
									<img src="images/album-p.jpg" />
									<h3>Wolfgang Amadeus Phoenix</h3>
									<p>Phoenix</p>
								</a>
								<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
							</li>
						</ul>
						
					<h2>Liste filtrable avec catégories</h2>
						<ul data-role="listview" data-filter="true" data-inset="true">
							<li data-role="list-divider">A</li>
							<li><a href="index.html">Adam Kinkaid</a></li>
							<li><a href="index.html">Alex Wickerham</a></li>
							<li><a href="index.html">Avery Johnson</a></li>
							<li data-role="list-divider">B</li>
							<li><a href="index.html">Bob Cabot</a></li>
							<li data-role="list-divider">C</li>
							<li><a href="index.html">Caleb Booth</a></li>
							<li><a href="index.html">Christopher Adams</a></li>
						</ul>
				</form>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Exemple de listes intégrées.

Appel du plugin listview

Vous pouvez appeler directement le plugin listview sur n'importe quel sélecteur, comme n'importe quel plugin normal de jQuery : $('#maliste').listview();

Mise à jour des listes

Si vous ajoutez des éléments à une liste, vous aurez besoin d'appeler la méthode refresh() sur elle-même pour mettre à jour les styles et créer des listes imbriquées qui sont ajoutés. Par exemple : $('#maliste').listview('refresh');

Notez que la méthode refresh() affecte seulement les nouveaux noeuds ajoutés à la liste. Cela pour des raisons de performance. Tous les éléments de la liste déjà améliorés seront ignorés par le processus d'actualisation. Cela signifie que si vous modifiez le contenu ou les attributs d'un élément de la liste déjà amélioré, elles ne seront pas pris en compte. Si vous voulez mettre à jour un élément de la liste, remplacez le par un nouveau balisage avant d'appeler refresh.