Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Contruire une liste avec image en CSS et JQUERY

Par Louison BEAUFRE Publié le 29/06/2016 à 22:00:14 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Présentation

Les listes sont des éléments courants sur un site web, il n'est pas forcément facile de les personnaliser. Je vais vous présenter deux façons permettant de construire une liste classique ou sous forme de menu avec des images.

Sommaire

Construire une liste en CSS

Construire une liste avec DDslick

Conclusion

Construire une liste en CSS

Cette partie est relativement simple. Il va suffire de construire une liste "ul" "li" classique dans une "div".

Voici un exemple de code que je vous conseille de reprendre pour bien suivre la suite :

Il va donc falloir attribuer une classe à notre "div". De même j'ai ajouté une classe "active" qui va nous permettre grâce au css de visualiser l'élément actif.

Notez aussi les id des balises qui vont nous servir à insérer nos images.

Je vous propose maintenant un design pour notre liste. Celui-ci est subjectif à vous de le personnaliser en fonction de vos envies.

Maintenant que votre css est intégré il va maintenant falloir insérer nos images. Je vous propose donc ce code CSS qui , grâce à nos précédents id vont insérer une image dans chaque élémént de notre liste.

Pour chaque id, vous pourrez insérer une image différente en modifiant simplement le chemin dans "url". Background-repeat va permettre de fixer l'image, grâce à cela notre image ne va s'afficher qu'une seule fois. Je vous invite fortement à modifier ce code pour bien le comprendre.

Vous avez maintenant vos images dans votre liste. Toutefois le design que je vous ai proposé est plutôt adapté à une liste horizontale que verticale. Pour transformer notre liste il va suffire d'insérer ce code:

Insérez se code dans la partie ".menuPreference ul li" afin que la liste s'affiche horizontalement.

Se qui nous donnera le résultat final suivant :

Construire une liste avec DDslick

DDslick est un plugin jQuery qui va nous permettre de créer des listes avec images avec un traitement et une personnalisation.

Tout d'abord il va falloir télécharger le code du plugin à cette adresse : https://dl.dropboxusercontent.com/u/40036711/Scripts/jquery.ddslick.min.js

Effectuez un copier-coller le code dans un fichier js nommé ddslick.js. Cela va vous permettre de pouvoir personnaliser le code proposé.

Pour mettre en place ce plugin voici un code de base html :

Remarquez que les options se situent dans une balise "div" et non pas "select" comme à l'habitué.

Afin d'activer le plugin il suffit d'ajouter ce code Jquery :

Une fois ces étapes effectuées vous devriez avoir un résultat semblable à celui-ci :

DDslick va permettre une certaine flexibilité dans son implémentation, je vais donc vous présenter quelques simples permettant de comprendre son utilisation.

Il va par exemple être possible d'ajouter un titre à votre liste. Pour cela c'est très simple il suffit d'agir sur le code Jquery comme cela :

Ce qui vous donnera un résultat semblable à celui-ci :

Je vais maintenant vous présenter un exemple qui introduit l'évènement au clique sur un élément de votre liste.

Pour cela on va modifier quelque peu le code Jquery en ajoutant la fonction de callback "onSelected".

Remarquez dans le code l'utilisation d'un booleen. Celui-ci va permettre d'éviter une redirection infinie. Il faut savoir qu'à chaque lancement de la page la fonction "onSelected" sera exécutée. Il faut donc prévoir cela dans le développement. Je vous invite à tester sans le booléen pour vous rendre compte.

Voici un exemple de remplissage dynamique de la liste, du type traitement de requête Ajax

Pour cela il va falloir faire appel à la fonction "ddslick("destroy")" pour supprimer l'action du plugin. Recréer l'html, puis effectuer un "append" du html créé. Il faudra ensuite appliquer à nouveau la fonction "ddslick" pour réactiver le plugin.

Conclusion

Construire des listes personnalisées peut s'avérer difficile au premier abord. Toutefois des outils simples et puissants existent et permettent de donner un style à vos listes. Il est possible de les construire totalement en CSS mais cela peut vite s'avérer long et laborieux. Des plugins tels que DDslick ne sont pas forcément simples à première vue mais une fois maîtrisés sont très puissants. J'espère que cet article vous aura donner quelques pistes pour avancer dans votre travail.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels