DEV Community

Cover image for Guida Isotope Filtering
Giandomenico Pagliara
Giandomenico Pagliara

Posted on

Guida Isotope Filtering

Introduzione

Isotope è una libreria javascript che permette di filtrare e ordinare vari elementi. In questa guida vedremo come filtrarli.

Risorse

Prima di tutto importiamo nel nostro file .html il cdn:

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<!-- o la versione Minified -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Oppure lo script della libreria che potrete trovare qui: Isotope Metafizzy. Inoltre potete inizializzare Isotope con jquery.

Se userete jquery importatelo prima dello script di isotope

Struttura HTML

In questo esempio vedremo come filtrare vari box in base al colore.

Filtri

Definiamo ogni filtro come un <button> e ad ognuno aggiungiamo l'attributo data-filter="". In data-filter inseriremo il nome della classe degli item che verranno filtrati alla pressione del medesimo bottone.

Importante sottolineare che il nome della classe in data-filter è preceduto da un punto.

Per visualizzare tutti gli elementi senza filtri aggiungiamo un bottone con data-filter="*".

<div class="filter-button-group">
  <button data-filter="*">Show All</button>
  <button data-filter=".red">Red</button>
  <button data-filter=".blue">Blue</button>
  <button data-filter=".yellow">Yellow</button>
</div>
Enter fullscreen mode Exit fullscreen mode

Griglia elementi

Inseriamo in un container con una classe specifica i vari item che filtreremo. Per ogni item inseriamo una classe che lo identificherà come un elemento da filtrare (in questo caso box). Inoltre aggiungiamo una classe che determinerà la categoria dell'elemento (red, yellow, blue):

<div class="griglia">
  <div class="box yellow"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box yellow"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box yellow"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Inizializzazione

Inizializziamo il nostro Isotope in Javascript.

con Vanilla Javascript:

var grigliaElementi = document.querySelector('.griglia');
var iso = new Isotope( grigliaElementi, {
  // options
});
Enter fullscreen mode Exit fullscreen mode

con Jquery (consigliato):

var $isotope = $('.griglia').isotope({
  // options
});
Enter fullscreen mode Exit fullscreen mode

Dove ci sono i commenti //options potrete inserire varie opzioni e il layout per la griglia. Potete trovare tutte le informazioni su Isotope Metafizzy.
Tutte le opzioni sono facoltative ma è consigliato usare sempre itemSelector che non fa altro che specificare quali saranno gli elementi del layout.

Quindi per questo esempio:

var $isotope = $('.griglia').isotope({
    itemSelector: '.box',
});
Enter fullscreen mode Exit fullscreen mode

Filtraggio

Aggiungiamo un evento ai bottoni che abbiamo settato in precedenza:

$('.filter-button-group').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $isotope.isotope({ filter: filterValue });
});
Enter fullscreen mode Exit fullscreen mode

Ogni volta che un <button> verrà clickato la variabile filterValue sarà impostata con la classe contenuta in data-filter del bottone e poi isotope filtrerà gli elementi per noi.

Un esempio pratico:

(Bonus) Griglia responsive e centrata

Vi capiterà di voler centrare la griglia degli elementi, per farlo il modo più semplice e efficace è inserire nelle opzioni del layout (di default) masonry l'opzione isFitWidth: true e impostare i margini della griglia su auto. Riprendiamo l'esempio precedente:

var $isotope = $('.griglia').isotope({
  masonry: {
    isFitWidth: true
  }
});
Enter fullscreen mode Exit fullscreen mode
.griglia{
  margin: 0 auto;
Enter fullscreen mode Exit fullscreen mode

Spero questa mini guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:

Linkedin
GitHub

Top comments (0)