Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Changement de blog : retrouvez moi pour un nouveau blog sur : www.micro-souffle.fr

09 Mar

Metafizzy : utilisation dans un projet Asp.net MVC

Publié par Antoine SEJALON  - Catégories :  #Asp.net

Metafizzy : utilisation dans un projet Asp.net MVC

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.

Metafizzy : utilisation dans un projet Asp.net MVC

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

Metafizzy : utilisation dans un projet Asp.net MVC

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> <!-- Les class servent à utiliser bootstrap et le data-filter permet par la suite de definir les objets à afficher via une sorte d'id de catégorie --> <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, ...).

<!-- cette div va etres la ref. d'affichage des objets --> <div class="table"> <!-- je met en col-md-4 pour avoir 3 objets par ligne A vous de choisir le nombre d'articles par ligne. le "categorie1" est l'identifiant qui va permettre de trier les objets --> <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 :

<script type="text/javascript"> // on recupere le conteneur table var $table = $('.table').isotope({ // options }); // filter items on button click $('.filter-button-group').on('click', 'button', function () { var filtreSelect = $(this).attr('data-filter'); $table.isotope({ filter: filtreSelect }); }); </script>

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

Bonne journée et bon code =)

Commenter cet article

À propos

Changement de blog : retrouvez moi pour un nouveau blog sur : www.micro-souffle.fr