Metafizzy : utilisation dans un projet Asp.net MVC

9 Mars 2016 , Rédigé par Antoine SEJALON Publié dans #Asp.net

Bonjour,

je vais vous présenter la librairie Metafizzy qui va nous permettre d'afficher des listes triables.

Dans un premier temps allez sur Metafizzy.

ensuite cliquez sur isotope.

Cliquez droit sur le bouton "Download isotope.pkgd.min.jsDownload" puis, "enregistrer la cible du lien sous...".

Ce fichier js sera à ajouter aux scripts de votre solution.

Passons au code :

Dans un premier temps nous allons ajouter le menu qui comporte les boutons de tri.

<ul>  <li><button class="btn btn-default" data-filter="*">Tous les objets</button></li> <li><button class="btn btn-default" data-filter=".categorie1">objets catégorie 1</button></li> <li><button class="btn btn-default" data-filter=".categorie2">objets catégorie 2</button></li> </ul>

Ensuite nous allons créer les objets à afficher (photos, block de texte, ...).

<div class="table">  <div class="element-item col-md-4 categorie1"> <h3>Objet 1</h3> <p>Mon txt objet 1</p> </div> <div class="element-item col-md-4 categorie1"> <h3>Objet 2</h3> <p>Mon txt objet 2</p> </div> <div class="element-item col-md-4 categorie2"> <h3>Objet 3</h3> <p>Mon txt objet 3</p> </div> <div class="element-item col-md-4 categorie2"> <h3>Objet 4</h3> <p>Mon txt objet 4</p> </div> </div>

Quand nous cliquerons sur le bouton avec l'identifiant "categorie2", seul les objets 3 et 4 seront visibles.

Enfin passons au script :

A vous maintenant d'ajuster le css pour avoir quelque chose de propre et adapté à vos besoins.

Bonne journée et bon code =)