Skip to content

Chapitre 04

Jump to bottom
ChristopheGueroult edited this page Sep 7, 2017 · 7 revisions

Les listes

Notions abordées lors de ce chapitre

Créer une liste

Pour créer une liste avec la mise en forme jQuery Mobile il suffit d'ajouter l'attribut data-role="listview" sur un élément <ul> (ou <ol> pour les listes ordonnées.

<ul data-role="listview">
    <li>Xavier Dupond</li>
    <li>Julie Lescot</li>
    <li>Max Durand</li>
    <li>Nathalie Martin</li>
</ul>

Voir la démo

Créer une liste de liens

Comme en html classique, ajouter simple une balise <a> dans chaque <li>. jQuery Mobile ajoute un icon à droite de chaque ligne.

<ul data-role="listview">
    <li><a href="c4-xavier.html">Xavier Dupond</a></li>
    <li><a href="c4-julie.html">Julie Lescot</a></li>
    <li><a href="c4-max.html">Max Durand</a></li>
    <li><a href="c4-nathalie.html">Nathalie Martin</a></li>
</ul>

Voir la démo

Travailler avec les fonctions dédiées aux listes

Liste insérée

L'utilisation de l'attribut data-inset="true" permet d'obtenir une liste insérée dans le main. Cette liste ne prend plus la largeur de la page. Les premier et dernier <li> sont dotés de bords arrondis.

<ul data-role="listview" data-inset="true">
    <li><a href="c4-xavier.html">Xavier Dupond</a></li>
    <li><a href="c4-julie.html">Julie Lescot</a></li>
    <li><a href="c4-max.html">Max Durand</a></li>
    <li><a href="c4-nathalie.html">Nathalie Martin</a></li>
</ul>

Voir la démo

Ajouter des diviseurs

Il est possible d'ajouter des diviseurs dans une liste jQuery Mobile en utilisant l'attribut data-role="list-divider". On peut ajouter autant de diviseurs que l'on veut.

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Direction</li>
    <li><a href="c4-xavier.html">Xavier Dupond</a></li>
    ...
</ul>

Voir la démo

Les diviseurs automatiques

L'attribut data-autodividers="true" sur l'élément <ul> crée automatiquement des diviseurs par ordre alphabétique (un peu à la manière d'un agenda téléphonique).

<ul data-role="listview" data-inset="true" data-autodividers="true">
    ...
</ul>

Voir la démo

Ajouter des compteurs sous forme d'info-bulles

L'attribut ui-li-count sur un <span> placé dans un <li> ajoute une info-bulle avec un compteur. L'icon affiché à droite des liens de la liste est remplacé par cette info-bulle.

<li>
    <a href="c4-julie.html">Julie Lescot</a>
    <span class="ui-li-count">9</span>
</li>

Voir la démo

Ajouter des vignettes dans une liste

Pour cela il suffit d'ajouter une balise <img> à l'intérieur de la balise <a>.

<li>
    <a href="c4-julie.html"><img src="images/avatar-femme.jpg">Julie Lescot</a>
</li>

Voir la démo

Des vignettes sous forme d'icons

Ajouter la class ui-li-icon affiche les vignettes sous forme d'icons.

<li>
    <a href="c4-julie.html"><img class="ui-li-icon" src="images/avatar-femme.jpg">Julie Lescot</a>
</li>

Voir la démo

Liste à deux actions

L'attribut data-split-icon sur le <ul> permet d'ajouter une action sur une liste de liens. Pour ajouter un bouton contenant l'icon delete il suffit d'ajouter un <a> dans chaque <li>. Le texte contenu dans le deuxième <a> sera remplacé par l'icon "delete" grâce à l'attribut data-split-icon sur le <ul>. Deux actions sont alors disponibles : le clic sur le lien et le clic sur le bouton "delete" (il faudra ensuite écrire une fonction jQuery pour supprimer l'item correspondant).

<ul data-role="listview" data-inset="true" data-autodividers="true" data-split-icon="delete">
    <li>
        <a href="c4-julie.html"><img class="ui-li-icon" src="images/avatar-femme.jpg">Julie Lescot</a>
	<a href="#">Delete</a>
    </li>
</ul>

Voir la démo

Clone this wiki locally