Les listes peuvent aussi être utilisées pour présenter des formulaires de façon ergonomique et adapté à votre site. Et pour améliorer le design de vos listes, vous pouvez ajouter des vignettes.
Découvrez dans la formation ci-dessous les options avancées des listes jQuery Mobile.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Les fonctionnalités avancées des listes avec le framework jQuery Mobile
Bonjour à tous et bienvenu sur Développement Facile.
On continu la suite de cette série dédiée au framework jQuery Mobile, là c’est directement la suite du cours précédent que vous avez eu sur les listes, donc il y a d’autres options, d’autres possibilités avec les guides de présentations, c’est ce que vous allez apprendre directement dans ce cours.
Les listes
Les listes sont très utilisées pour présenter des formulaires de façon ergonomiques dans votre site, rappelez-vous sur les Smartphones ou les tablettes où il y a très peu de place disponible pour afficher toutes les informations, et donc pour améliorer le design de votre site, vous pouvez ajouter des vignettes, des images de taille 80 par 80 pixels. Il faut savoir qu’une image parle beaucoup mieux qu’un long discours, quand vous pouvez utiliser des petites vignettes, des images, utilisez-les ça parle beaucoup mieux à vos utilisateurs, en plus une image prend généralement moins de place qu’un texte.
Pour utiliser ces vignettes, il suffit d’utiliser une balise img, et elle doit être placée en première position par rapport aux autres éléments dans la balise li, li, img, le contenu texte de votre élément, comme vous avez sur l’exemple de code source, pensez à mettre le lien href.
Vous pouvez aussi ajouter des mini-icônes, des icônes sur vos listes, le vignettes sont plus grandes, c’est 80 pixels, les icones c’est 16 pixels. Elles sont incluses dans une balise image, même principe, et elles comportent en plus la mention classe ui li-icon, ça fait appelle à une classe CSS, ça va transformer votre icône dans l’élément. Je vous ai mis un exemple de code source pour utiliser une icône dans un élément de votre div.
Vous avez également des petites bulles de comptage ça peut être très utile pour informer vos utilisateurs, si vous avez un programme de formation à vendre, vous pouvez donner le nom des vidéos disponibles dans chaque module grâce à cette petite bulle de comptage ou le nombre de commentaires d’un article, c’est généralement utilisé pour le nombre de commentaires d’un article, pour créer une bulle de comptage vous utilisez une balise span, avec ajouter la classe CSS, la classe ui-li count. Je vous ai mis un exemple de code source aussi, vous voyez, li, href, module 1, span, le comptage, 13 cours.
On va voir tout ça à travers un exemple de code source à la fin de ce cours, visuellement ça va beaucoup plus vous parler.
jQuery Mobile propose également une fonction de recherche, si vous avez une liste avec énormément d’éléments comme tous les départements de France, l’utilisateur ne va pas s’amuser à scroller surtout, rappelez-vous, il est sur un smartphone, une tablette, ça va être trop long, il y a un champ de recherche qui s’affiche, dès que l’utilisateur commence à taper les premières lettres, la liste va se réduire d’elle-même et proposer uniquement les possibilités qui correspondent à la recherche de votre internaute, c’est très pratique pour afficher beaucoup d’informations dans une liste rapidement et simplement par l’internaute.
jQuery Mobile propose l’attribut data-filtertext= le critère de recherche alternatif, si vous avez des départements, l’utilisateur peut taper la lettre du département, ou le numéro, donc vous avez deux critères de recherches, je vous ai mis un exemple de code source ici.
Exemple d’application
De toute façon on va voir tout ça en pratique à travers un exemple de code source et visuel. Au tout début vous avez la liste, la création d’un formulaire, nombre de places voilà, renseigner, valider votre inscription, on verra dans un autre cours comment créer les formulaires, vous avez tout un tas d’options, oui, non c’est très visuel, ça on verra.
Votre liste numérotée avec les bords arrondis et donc là une image 80 par 80 pixels ajoutée de cette façon-là, tout simplement. Là on peut mettre tous les départements de France, j’avoue, j’ai été un peu, je démarre là-dessus, j’ai mis 10 départements et quand vous tapez les premières lettres, la liste est automatiquement filtrée, Haute-Provence, il suffit de cliquer dessus après, sinon qu’est-ce que vous avez ?
Voilà automatiquement filtré, Arden, Ardèche, je tape le D ça filtre, tout simplement, c’est aussi simple que ça.
Voilà les deux exemples avec la vignette de 80 par 80 pixels, regardez aussi, classe span ui li count, pour réafficher un petit compteur de vidéo, vous avez la solution de l’afficher comme ça, ou comme ça, donc comme ça c’est ici, avec la classe ui li side dans une balise p, et là c’est dans une balise span, balise span ui li count 13 vidéos, un élément séparateur qui est ici, list-divider, pour séparer des éléments.
On va voir le deuxième exemple, il n’y pas grand-chose qui change, si vous regardez, c’est exactement la même chose, il y a eu une petite erreur, je vous montre deux fois le même exemple, il n’y a pas de problème.
Votre plan d’actions !
Maintenant c’est à vous de jouer, prenez les exemples de code source de ce cours, réutilisez-les dans vos applications pour les tablettes, les smartphones, prenez le code source sous ce cours vidéo, si vous avez des questions posez-les également sous ce cours vidéo, vous avez une image cliquable en haut de cette vidéo, ou à la fin de cette vidéo, il y a un lien qui va apparaître, un lien cliquable qui va vous renvoyer vers la suite, la deuxième vidéo, avec la deuxième vidéo vous allez aller plus loin dans l’utilisation du framework jQuery, jQuery UI, jQuery Mobile, Dojo, je vous dis patientez, là à la fin de cette vidéo, il y a un lien cliquable qui va apparaître, vous cliquez sur ce lien cliquable et vous serez redirigé vers la deuxième vidéo, moi je vous dis à tout de suite sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez un exemple de listes avancées jQuery Mobile
Et voici le code source commenté pour créer des listes avec des fonctionnalités avancées.
Téléchargement du code source Exemple liste avancée jQuery Mobile
