Magnet ottimo plugin jQuery alternativo a Salvattore, Mansory e Isotope

Isotope, Salvattore e Mansory sono buone soluzioni per ottenere layout a griglia ma il mio preferito rimane di gran lunga Magnet 2 perché semplice da implementare, flessibile e facilmente integrabile in una griglia bootstrap.
I layout a griglia sono diventati popolari grazie a Pinterest: un trend sempreverde quando si tratta di visualizzare un portfolio o delle news con in mente i dispositivi mobili.

Le griglie hanno indubbiamente molti pregi: per esempio ci permettono di disporre elementi eterogenei in modo da sfruttare tutto lo spazio disponibile a prescindere dalle dimensioni dello schermo e al contempo ci aiutano a semplificare le interfacce predisponendo filtri per ordinare o raggruppare elementi.

Magnet griglia javascript responsiva isotope salvattore mansory

Le principali caratteristiche di Magnet 2

  • il plugin dispone di un’ottima documentazione di supporto che riporta esempi di codice per tutte le funzionalità della griglia
  • viene garantito il supporto di IE11, Firefox, Safari, Opera, Chrome ed Edge
  • Magnet mette a disposizione un sistema a griglia molto versatile e completo che permette sia di ordinare gli elementi e che di creare filtri dinamici
  • Magnet nella sua seconda release è diventato indipendente da jQuery (si basa su Vanilla js) e può essere utilizzato sia adottando la sintassi di jQuery che con quest’ultimo.
  • Per un utilizzo avanzato vengono messi a disposizione eventi e metodi molto granulari per tutte le esigenze

Come utilizzare subito Magnet

Magnet prevede una struttura HTML come la seguente:

Inizializzo il plugin così (sintassi jQuery):

così se uso vanilla js:

Se utilizziamo il plugin per un portfolio (gli elementi della griglia sono immagini) dobbiamo ricordarci di usare $(window).load in modo da utilizzare magnet solo quando tutte le foto sono state caricate (in questo caso consiglio di abbinare magnet ad un preloader), per box testuali è sufficiente $(document).ready:

Usiamo i filtri

Magnet permette di filtrare gli elementi di una griglia in modo semplice. E’ sufficiente applicare una classe che indichi la categoria di appartenenza dell’elemento ad es. “.frutta”:

Ora creiamo una pulsantiera dove ciascun bottone abbia uno specifico data-filter:

E’ possibile combinare più classi per filtrare più categorie contemporaneamente. A questo punto si può creare uno script che applichi il filtro desiderato ad un evento click:

Rispondi

Leggi articolo precedente:
Bootstrap 3: quello che c’è da sapere sulla griglia responsiva

In questo breve tutorial ci concentreremo sul componente principale di bootstrap: la sua griglia responsiva. Bootstrap include fra i suoi strumenti una griglia responsiva a 12 colonne...

Chiudi