Bonjours les amis !
Aujourd’hui, je vais vous présenter une petite fonction jQuery que j’ai mise en place pour un projet. Le principe est simple, on est sur l’administration d’un serveur qui gère des projets multimédias. Afin de pouvoir retrouver, le projet rapidement on l’affiche sous forme de bloc avec une image correspondante, seulement voila pour pouvoir trier rapidement tout les projets cela peut vite devenir fouillis. Afin de pallier à ce soucis on m’a demandé de réaliser un script jQuery qui va permettre de simplifier ce classement, en changeant simplement la classe de la liste de projets afin de l’afficher de manière plus condenser. Je vais d’abord commencer par vous présenter le résultat et on partira ensuite sur les explications.
Résultat du script jQuery
- Lorem ipsum, etc
- Lorem ipsum, etc
- Lorem ipsum, etc
- Lorem ipsum, etc
- Lorem ipsum, etc
- Lorem ipsum, etc
- Lorem ipsum, etc
- Lorem ipsum, etc
Structure de la page Html
Alors vous allez voir que le script est super simple à mettre en place, tout d’abord le html :
<div class="btn_actions"> <img src="img/thumbnails.png" id="thumbnails" class="opacity" alt="" /> <img src="img/lines.png" id="lines" class="opacity" alt="" /> </div> <ul class="list"> <li class="thumbnails">Lorem ipsum, etc </li> <li class="thumbnails">Lorem ipsum, etc </li> <li class="thumbnails">Lorem ipsum, etc </li> <li class="thumbnails">Lorem ipsum, etc </li> <li class="thumbnails">Lorem ipsum, etc </li> <li class="thumbnails">Lorem ipsum, etc </li> <li class="thumbnails">Lorem ipsum, etc </li> <li class="thumbnails">Lorem ipsum, etc </li> <li class="thumbnails">Lorem ipsum, etc </li> </ul>
Ici, rien de bien compliqué, on a une liste contenant plusieurs li et une div contenant deux images qui vont servir de boutons. Appliquons un peu de css afin d’avoir le même rendu que moi 😉 !
Le Code CSS associée
.btn_actions { text-align: center; } .btn_actions img { padding: 3px; } .list { list-style: none; text-align: center; } .list li.thumbnails { line-height: 200px; display:inline-block; width: 200px; height: 200px; border: 1px solid #4A4A4A; margin: 15px; } .list li.lines { display:block; border: 1px solid #4A4A4A; width: 100%; margin: 15px 0; padding: 5px; } .opacity { opacity:0.4; filter: alpha(opacity = 40); -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=40)"; -webkit-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; } .opacity:hover { opacity: 1; filter: alpha(opacity = 90); -ms-filter:"prodig:DXImageTransform.Microsoft.Alpha(Opacity=90)"; cursor: pointer; }
La class opacity va permettre de gérer les effets d’hover des boutons, on affecte une opacité de 40% à l’image d’origine et quand la souris passe au-dessus du bouton on fait passer cette opacité à 90%. La class list permet de masquer le style de base des li. Et enfin ce qui nous intéresse le plus les classes thumbnails et lines. La première permet d’afficher le li sous forme de vignette grâce à la propriété display: inline-block. Et enfin la seconde classe permet d’afficher un li sous forme d’une ligne, notamment grâce au width: 100%;
jQuery, fonction click et changement de classes
Passons maintenant à la fonction jQuery :
$(document).ready(function() { function changeStyle(list) { var modeList = false; $('#thumbnails').click(function() { if(modeList) { $(list).find('li').removeClass("lines").addClass("thumbnails"); modeList=false; } }); $('#lines').click(function() { if(!modeList) { $(list).find('li').removeClass("thumbnails").addClass("lines"); modeList=true; } }); } changeStyle(".list"); });
On commence par attendre que le document est chargé une fois que c’est fait, on lance notre fonction changeStyle() qui prend en paramètre l’id ou la classe de la liste. Au début de la fonction on crée une variable modeList qu’on initialise à false. Au clic sur un bouton, on vérifie si la variable modeList est vrai ou pas. Si elle est vrai, alors on va chercher tout les li et on remplace la classe actuelle par celle pour les vignettes et on repasse la variable modeList à faux et on fait le contraire dans l’autre cas !
Et voila c’est déjà terminé, grâce à JQuery en seulement 10 lignes de codes, on obtient un résultat plutôt sympathique.