Apprenez comment ajouter rapidement des listes avec le Framework jQuery Mobile. Vous pouvez ajouter un lien sur chaque élément de votre liste. Et avec une simple pression sur l’élément, l’utilisateur aura, par exemple, accès à une page explicative.
Tout est dans la formation ci-dessous
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment utiliser les listes avec le framework jQuery Mobile
Bonjour à tous et bienvenu sur Développement Facile.
Dans ce nouveau vous allez apprendre à utiliser les listes avec le framework jQuery Mobile, créer des bêtes listes, vous connaissez les balises ul, ol, li, c’est ce qui permet de créer des listes.
Les listes non numérotées
Avec jQuery Mobile, vous avez tout un tas d’options déjà elles vont s’afficher elles seront très jolies, et le contenu des listes vous pouvez mettre un peu ce que vous voulez, des images, du texte, en-haut, en bas, à gauche, au milieu etc.
Vous pouvez créer des listes non numérotées il suffit d’ajouter l’attribut data-role=listview à une balise ul, et vous pouvez ajouter un lien dans chaque élément de votre liste, l’utilisateur, par une simple pression sur les l’élément, l’élément de votre liste, il y a un lien, ça va afficher une autre page, ce que vous avez décidé. jQuery Mobile propose une seconde présentation de la liste qui apparaît avec des bords arrondis dans la fenêtre, il suffit d’utiliser l’attribut data-insert=true, à côté de data-role=listeview.
Les listes numérotées
Je vous ai mis un exemple de code source avec une liste numérotée, qui est créée avec la balise ol, vous avez data-role=listeview pour dire que c’est une liste, data-insert=true pour avoir les bords arrondis sur la liste.
Et vous pouvez ajouter des séparateurs pour grouper les éléments de façon logique, si vous avez une liste avec énormément d’éléments, c’est bien de mettre des séparateurs, ça va aider l’utilisateur à ce que la liste soit beaucoup plus lisible pour lui, pour ajouter un séparateur de liste, c’est encore très simple, il suffit de créer une balise li classique, avec un attribut data-role=list-divider tout simplement.
jQuery Mobile, il suffit de connaître les attributs à utiliser, vous les mettez dans les balises HTML existantes, celles que vous connaissez bien, si vous ne les connaissez pas bien, il y a une trentaine de cours gratuits disponibles sur Développement Facile, sur HTML 5, comment l’utiliser, je vous conseille d’aller les consulter, si vous connaissez vous n’aurez aucun mal à apprendre à utiliser le framework jQuery Mobile. Vous pouvez aussi ajouter un trait vertical entre votre texte et votre icone, ça fait que jQuery Mobile il va diviser en deux l’élément de votre liste avec le texte à gauche, l’icône à droite, et l’utilisateur peut cliquer sur le texte, et sur l’icône pour accéder à son contenu.
Il suffit de mettre un deuxième lien dans chaque item de la liste, le premier lien s’applique au texte de l’item et le second à l’icône. Voilà, jQuery Mobile gère automatiquement le texte du second lien sous forme d’infobulle, pour une meilleure accessibilité à l’utilisateur.
Vous pouvez également modifier l’icône, il suffit d’ajouter à la balise ul, l’attribut data-split-icon, dans un des cours précédents, pas le dernier, mais celui d’encore avant, je vous ai donné tous les mots clés pour afficher toutes les icônes qui existes dans jQuery Mobile, allez consulter ce cours comme ça vous pourrez choisir l’icône à afficher dans les éléments de votre div.
Présentation des listes
Vous avez la possibilité de reprendre des balises de titres et de paragraphes pour afficher un contenu beaucoup plus élaboré, présenté de façon un peu plus ergonomique pour vos internautes, vous pouvez également ajouter des informations supplémentaires, dans le cas d’une boutique en ligne le nombre de places, ou une date que vous pouvez ajouter à droite de l’élément avec la classe ui, li aside, je vous ai mis un exemple, 13 chapitres, vous avez l’élément de votre liste avec ul, li détail 1 module1, le descriptif maitriser la POO, la classe ui aside, ça donne le nombre de chapitre qui sera affiché ici, 13 chapitres. Vous allez voir dans l’exemple juste après, de toute façon, ne vous inquiétez pas.
Exemple d’application
Je vous montre un peu à quoi ça ressemble, vous avez les listes, regardez, 13 chapitres, l’icône, la liste séparée d’un côté, menu spécial, de l’autre l’icône cliquable, ou la liste avec un seul clic, le séparateur de liste, ici, le titre, la description de l’élément, le nombre de chapitres, et comment on fait ça par le code source ?
Vous devez le savoir vu que vous avez écouté le cours juste avant, data-listeview avec l’attribut data-role et inset=true pour avoir les effets ombrés et arrondis, et après ui-li-aside pour mettre 15 chapitres, ici, la description module2, la description, le titre module 2, la description avec un chapitre, ensuite, il y a une deuxième liste, séparateur, l’icône en savoir plus, ce sera sur l’infobulle que l’on voit ici, des fois on ne la voit pas, demandez votre accès, et automatiquement vous avez l’icône qui est mise avec une séparation.
Ça fait que vous pouvez mettre deux liens différents si vous le souhaitez, c’est à vous de voir, il y a deux liens définit, moi j’ai mis le même lien après vous avez toutes les possibilités, il y a toujours le pop-up, on peut combiner les listes, les pop-up, le bouton de téléchargement ici, le menu qui reste fixe même si on fait dérouler la page, tout est géré d’une façon relativement simple avec jQuery Mobile.
Je vous remontre, data-role pour la liste, data-insert pour avoir l’effet ici, les éléments ici, pour rajouter un chapitre, ce petit élément ici, la description ici, et le titre.
Votre plan d’actions !
Maintenant c’est à vous de jouer, à vous d’appliquer jQuery Mobile, ce que vous venez de voir dans ce cours, dans vos applications Web pour les tablettes, les smartphones. Retrouvez le code source sous cette vidéo si vous avez des questions posez-les directement sous cette vidéo également, et sachez qu’il y a une deuxième vidéo pour aller plus loin avec jQuery, jQuery UI, jQuery Mobile, vous pouvez cliquer en haut pour accéder à la deuxième vidéo, ou à la fin de cette vidéo il y aura un lien cliquable qui va apparaitre, attendez la fin de cette vidéo elle est terminée, il y a un lien cliquable et ça vous envoie vers la deuxième vidéo, moi je vous dis à très vite, à tout de suite, sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple liste jQuery Mobile
Et voici le code source pour créer une liste avec jQuery Mobile.
Téléchargement du code source Exemple de liste jQuery Mobile
