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>
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>
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>
Inizializzazione
Inizializziamo il nostro Isotope in Javascript.
con Vanilla Javascript:
var grigliaElementi = document.querySelector('.griglia');
var iso = new Isotope( grigliaElementi, {
// options
});
con Jquery (consigliato):
var $isotope = $('.griglia').isotope({
// options
});
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',
});
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 });
});
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
}
});
.griglia{
margin: 0 auto;
Spero questa mini guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:
Top comments (0)