-
Notifications
You must be signed in to change notification settings - Fork 10
/
docs-lists.html
210 lines (146 loc) · 18.4 KB
/
docs-lists.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Docs jQuery Mobile -Aperçu des listes</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Listes</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a> <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Recherche</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Listes</h2>
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a href="docs-lists.html" data-role="button" data-transition="fade" class="ui-btn-active">Bases</a></li>
<li><a href="lists-options.html" data-role="button" data-transition="fade">Options</a></li>
<li><a href="lists-methods.html" data-role="button" data-transition="fade">Méthodes</a></li>
<li><a href="lists-events.html" data-role="button" data-transition="fade">Événements</a></li>
</ul>
<h2>Listes chainées de base</h2>
<p>Une vue de liste est codée comme une simple liste non ordonnée contenant des éléments de liste liés avec l'attribut <code> data-role="listview"</code>. jQuery Mobile appliquera tous les styles nécessaires pour transformer cette liste en une liste mobile conviviale avec 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 la 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 du le lien, créer la nouvelle page dans le DOM, puis lancer une transition de page. Regardez la <a href="../api/data-attributes.html">reference de data- attribute</a> pour voir tous les attributs possibles que vous pouvez ajouter aux listes.</p>
<p>Voici le balisage HTML pour une liste de base chainées.</p>
<pre><code>
<ul data-role="listview" data-theme="b">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>
</code></pre>
<a href="lists-ul.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Exemple de liste basique</a>
<p><strong>Note de style sur les listes non-intégrées</strong> : 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é.</p>
<h2>Listes imbriquées</h2>
<p>En intégrant des <code>ul</code> ou <code>ol</code> 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 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 le nuancier "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. Notez que la page de chaque liste imbriquée est créé lorsque la page parent se charge et pour chaque page imbriquée les événements de page seront déclenchés.</p>
<p>Pour <a href="../lists/lists-themes.html">définir la couleur du nuancier</a> d'une liste enfant, mettez l'attribut <code>data-theme</code> à l'intérieur de chaque liste.</p>
<a href="lists-nested.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Exemple de liste imbriquée</a>
<h2>Listes numérotées</h2>
<p>Les listes peuvent également être créées à partir des listes ordonnées (<code>(ol)</code>) 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 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.</p>
<a href="lists-ol.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Exemple de liste numérotée</a>
<h2>Listes en lecture seule</h2>
<p>Les listes 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 stylise les éléments de la liste comme des boutons, de la même manière que les autres types de listes (voir la <a href="../lists/lists-themes.html">thématisation des listes</a>), mais sans le dégradé sur l'arrière-plan.</p>
<a href="lists-readonly-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Exemple de liste en lecture seule</a>
<h2>Listes avec bouton séparé</h2>
<p>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 de séparation dans la liste, il suffit d'ajouter un second lien à l'intérieur du <code>li</code> 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 <code>title</code> du lien vers le texte du lien pour l'accessibilité.</p>
<p>Vous pouvez définir l'icône pour l'icône séparé à droite en spécifiant un attribut <code>data-split-icon</code> avec le <a href="../buttons/buttons-icons.html">nom de l'icône</a> que vous voulez. L'icône par défaut est "arrow-r", mais vous pouvez le configuré avec <a href="../lists/lists-options.html">l'option de liste</a> <code>splitIcon</code>. En ajoutant l'attribut <code>data-icon</code> à l'élément de la liste, vous pouvez définir des icônes pour chaque séparateur. La couleur du nuancier du thème du bouton séparé est par défaut à "b" (bleu dans le thème par défaut), mais il peut être modifié en spécifiant une lettre de nuancier avec l'attribut <code>data-split-theme</code> au niveau de la liste ou individuellement au niveau du lien pour les séparateurs avec l'attribut <code>data-theme</code> .</p>
<a href="lists-split.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Exemple de liste séparée</a>
<h2>Séparateurs de liste</h2>
<p>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 <code> data-role="list-divider"</code> à tout élément de la liste. Ces éléments sont stylisés par défaut avec le nuancier "b" de la barre (bleue dans le thème par défaut) mais vous pouvez spécifier un thème pour les séparateurs en ajoutant l'attribut <code>data-divider-theme</code> à l'élément de la liste (<code>ul</code> ou <code>ol</code>l) et en spécifiant une lettre de nuancier.</p>
<a href="lists-divider.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Exemple de séparateur de liste</a>
<h2>Autodividers</h2>
<p>Une liste peut être configurée pour générer automatiquement des séparateurs pour ces éléments. Cela est possible en ajoutant un attribut <code>data-autodividers="true"</code> à n'importe quelle liste.</p>
<p>Par défaut, le texte utilisé pour créer des séparations est la première lettre en majuscule du texte de l'élément. Alternativement, vous pouvez spécifier un texte de séparation en paramétrant l'option <code>autodividersSelector</code> sur la liste par programmation. Par exemple, pour ajouter un sélecteur personnalisé à l'élément avec <code>id="mylistview"</code> :</p>
<pre><code>
$("#mylistview").listview({
autodividers: true,
// la fonction selector est passée à l'élément <li> depuis la liste,
// cela retourne un texte de séparateur approprié pour l'élément <li>
// par une chaine de caractère
autodividersSelector: function ( li ) {
var out = /* générer une chaine basée sur le contenu de li */;
return out;
}
});
</code></pre>
<p>Notez que si vous utilisez des éléments de liste formatés qui contiennent un élément flottant (par exemple <code>ui-li-aside</code>), cet élément précède ses frères et sœurs quelle que soit l'ordre dans votre balisage HTML. De ce fait, le premier caractère de l'élément flottant est utilisé comme texte de séparation. Par conséquent, il est recommandé de spécifier le texte de séparation dans ce cas.</p>
<p>Si de nouveaux éléments sont ajoutés ou retirés de la liste, les séparateurs <em>ne sont pas</em> automatiquement mis à jour : vous devez appeler <code>refresh()</code> sur la liste pour redessiner les séparateurs.</p>
<a href="lists-autodividers.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Exemple Autodividers</a>
<h2>Filtre de recherche</h2>
<p>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 <code>data-filter="true"</code> à 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 <a href="../api/globalconfig.html">lier l'événement <code>mobileinit</code></a> et définir l'option <code>$.mobile.listview.prototype.options.filterPlaceholder</code> avec une chaîne de votre choix ou utiliser l'attribut de donnée <code>data-filter-placeholder</code> 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 l'attribut de donnée <code>data-filter-theme</code> sur votre liste.</p>
<a href="lists-search.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Exemple de filtre de recherche</a>
<p>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 <code>$.mobile.listview.prototype.options.filterCallback</code> durant le <code>mobileinit</code> ou après que le widget soit créé avec<code>$("#mylist").listview('option', 'filterCallback', yourFilterFunction)</code>. Toute fonction définie pour la fonction de rappel fournira trois arguments. Tout d'abord, le texte de l'élément de la liste actuelle et le deuxième la valeur recherchée et le troisième l'élément de la liste filtré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 <code>searchValue</code> , fait cela comme une sous-chaîne qui est décrite ci-dessous :
</p>
<pre><code>function( text, searchValue, item ){
return text.toString().toLowerCase().indexOf( searchValue ) === -1;
};</code></pre>
<p>Pour filtrer les éléments de la liste par des valeurs autres que le texte, ajoutez un attribut <code>data-filtertext</code> à l'élément de la liste. La valeur de cet attribut sera passée comme premier argument de la fonction <code>filterCallback</code> à la place du texte. Alternativement, vous pouvez utiliser un attribut de votre choix tel que défini sur l'élément de la liste elle-même.</p>
<a href="lists-search-filtertext.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Exemple de filtre des données masquées</a>
<h2>Formatage du texte et compteur</h2>
<p>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.</p>
<ul>
<li>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 <code>ui-li-count</code>.</li>
<li>Pour ajouter la hiérarchie du texte, utiliser des titres pour augmenter la police et utilisez les paragraphes pour réduire la police. </li>
<li>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 <code>ui-li-aside</code>.</li>
</ul>
<a href="lists-count.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Listec des bulles de compteur</a> <a href="lists-formatting.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Liste avec du texte formaté</a>
<h2>Miniatures & icônes</h2>
<p>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 pixel dans les éléments d'une liste, ajoutez la classe de <code>ui-li-icon</code> à l'élément image.</p>
<a href="lists-thumbnails.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Liste avec des images miniatures</a><a href="lists-icons.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Liste avec des images d'icône</a>
<h2>Listes intégrées</h2>
<p>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 <code> data-inset="true"</code> à la liste (ul ou ol), cela applique l'apparence intégrée.</p>
<a href="lists-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Example de liste intégrée</a>
<h2>Appel du plugin listview</h2>
<p>Vous pouvez appeler directement le plugin listview sur n'importe quel sélecteur, comme n'importe quel plugin normal de jQuery :</p>
<code>$('#mylist').listview();</code>
<h2>Mise à jour des listes</h2>
<p>Si vous ajoutez des éléments à une liste, vous aurez besoin d'appeler la méthode <code>refresh()</code> sur elle-même pour mettre à jour les styles et créer des listes imbriquées qui sont ajoutés. Par exemple :</p>
<code>$('#mylist').listview('refresh');</code>
<p>Notez que la méthode <code>refresh()</code> affecte seulement les <strong>nouveaux noeuds</strong> 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.</p>
<p>Si vous voulez initialement masquer un élément de la liste, vous pouvez faire cela en ajoutant une classe <strong><code>ui-screen-hidden</code></strong> à l'élément li. En utilisant cette classe, cela assure que le style de coin soit appliqué correctement, ainsi que le border-bottom sur le dernier élément visible.
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>Aussi dans cette rubrique</h3>
<ul data-role="listview" data-theme="c" data-divider-theme="d">
<li data-role="list-divider">Listes</li>
<li data-theme="a"><a href="docs-lists.html">Listes de bases & API</a></li>
<li><a href="lists-ul.html">Liste chainée de base</a></li>
<li><a href="lists-nested.html">Liste imbriquée</a></li>
<li><a href="lists-ol.html">Liste numérotée</a></li>
<li><a href="lists-split.html">Liste de bouton séparé</a></li>
<li><a href="lists-divider.html">Séparateurs de liste</a></li>
<li><a href="lists-autodividers.html">Autodividers</a></li>
<li><a href="lists-count.html">Bulle compteur</a></li>
<li><a href="lists-thumbnails.html">Miniatures</a></li>
<li><a href="lists-icons.html">Icônes</a></li>
<li><a href="lists-formatting.html">Formatage du contenu</a></li>
<li><a href="lists-inset.html">Encart avec listes stylées</a></li>
<li><a href="lists-search.html">Barre de filtre de recherche</a></li>
<li><a href="lists-search-inset.html">Encart barre de filtre de recherche</a></li>
<li><a href="lists-search-with-dividers.html">Barre de filtre de recherche avec séparateurs</a></li>
<li><a href="lists-search-filtertext.html">Filtre de recherche des données cachées</a></li>
<li><a href="lists-readonly.html">Listes en lecture seule</a></li>
<li><a href="lists-readonly-inset.html">Encart listes en lecture seule</a></li>
<li><a href="lists-forms.html">Listes avec formulaires</a></li>
<li><a href="lists-forms-inset.html">Encart listes avec formulaires</a></li>
<li><a href="lists-collapsible.html">Listes pliables</a></li>
<li><a href="lists-performance.html">Test de performance de liste</a></li>
<li><a href="lists-themes.html">Liste thématisée</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>© 2012 jQuery Fondation et les autres contributeurs</p>
</div>
</div><!-- /page -->
</body>
</html>