08
FEV

Isotope - Ordonner et filtrer dynamiquement vos éléments HTML

Publié le 08/02/11 à 10h10 par Sybio

Isotope est un plugin JQuery qui vous permet de réorganiser votre contenu HTML (une liste, des divs, des images...) au clic d'un lien.

Plugin JQuery Isotope

Ce plugin est une bonne alternative à Quicksand (qui a la même fonctionnalité).

On voit déjà son utilité, par exemple le fait de pouvoir trier à la volée des articles d'un site d'e-commerce.

 

Code:

Pour le mettre en place, vous créez un conteneur qui contiendra vos éléments à filtrer et / ou à réorganiser:

<div id="container">
  <div class="t-shirt"><a href="/t-shirt1.html"><img src="/billet/add/id/t-shirt1.jpg" alt="" /></a></div>
  <div class="t-shirt"><a href="/t-shirt2.html"><img src="/billet/add/id/t-shirt2.jpg" alt="" /></a></div>
  <div class="pull"><a href="/pull1.html"><img src="/billet/add/id/pull2.jpg" alt="" /></a></div>
  ...
</div>

Vous initiez le plugin Isotope sur votre conteneur, qui pour le moment fait apparaitre tous les éléments:

$('#container').isotope({ filter: '*' });

Ensuite vous créez plusieurs liens en guise de filtres:

<ul id="filters">
  <li><a href="#">Tous</a></li>
  <li><a href="#">T-Shirt</a></li>
  <li><a href="#">Pull</a></li>
</ul>

Ceux-ci doivent posséder l'attribut "data-filter", valide html, qui contiendra les noms des classes correspondantes à filtrer.

Puis vous rajoutez un bout de code JQuery qui littéralement signifie: "au clic d'un lien de la liste #filters, on récupère l'attribut data-filter pour le stocker dans la variable selector, afin de filtrer uniquement la class contenu dans cette variable":

$('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $('#container').isotope({ filter: selector });
  return false;
});

Enfin, vous rajoutez un peu de CSS pour s'assurer du bon fonctionnement du plugin:

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

Vous pouvez ajouter de nombreux paramètres, comme des effets via le plugin Easing, la méthode pour réorganiser (désordonné, verticale, ...), créer plusieurs catégories de filtres (des fitlres pour réorganiser les éléments, d'autres pour filtrer les class comme vu dans l'exemple ci-dessus), etc... pour cela, lisez la doc' officielle.

 

Attention: vous devez acheter une licence auprès de l'auteur si vous souhaitez revendre une version du plugin ! Pour le reste, vous pouvez l'utiliser sans limite.

Site Officiel

Démo

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web