Dopo aver speso un paio di ore alla ricerca di un plugin jQuery per suddividere le liste su più colonne, ho deciso the crearne uno da zero. Il risultato è davvero molto buono. Spero vi tornerà utile quando vi capiterà di dover gestire una lista su più colonne.

Demo – GitHub

Per mantenere il plugin il più semplice e flessibile possibile ho deciso di non definire alcuna regola CSS o larghezza delle colonne all’interno del JavaScript. Il plugin genera semplicemente del codice HTML pulito e valido a cui potrete poi associare degli stili CSS, flottando le liste o facendo ciò che più desiderate.

Il plugin prende la vostra lista, la include in un DIV contenitore, crea un numero di liste pari al numero di colonne che avete richiesto e suddivide i singoli elementi della lista all’interno delle differenti liste in modo uniforme. Nel caso in cui gli elementi della lista non siano sufficienti a riempire tutte le colonne richieste in modo uniforme, il plugin nasconderà le colonne in eccesso (questo potrebbe succedere solo se scegliete l’ordinamento verticale per gli elementi della lista).

Qui potete vedere il plugin Easy List Splitter in azione. Il plugin è stato realizzato in maniera non intrusiva, ottimizzata per i motori di ricerca e totalmente accessibile.

Cosa introduce di nuovo?

Easy List Splitter mantiene l’HTML al minimo. Non aggiunge al codice alcun elemento che non sia strettamente necessario e non inserisce alcuno stile in linea. Ciò che otterrete è un HTML pulito e semplice, con qualche classe che potrà essere utilizzata per personalizzare le vostre liste. Potrete inoltre scegliere se ordinare gli elementi della lista in orizzontale o in verticale e se mantenere il CSS di default o modificarlo secondo le vostre esigenze.

Funzionalità

  • Dividi qualunque lista ordinata (OL) o non ordinata (UL) in diverse colonne
  • Definisci il numero di colonne in cui suddividere le tue liste
  • Invoca il plugin su più di una lista nella stessa pagina impostando un diverso numero di colonne
  • Il CSS è completamente separato dal JavaScript. Potete sia modificare il CSS esistente, sia crearne uno nuovo
  • Una classe ‘last’ viene automaticamente aggiunta ad ogni ultima lista generata in modo che possiate facilmente rimuovere il margine o padding laterale
  • Novità: Con la versione 1.0.2 Easy List Splitter Plugin mantiene le eventuali liste annidate!
  • Novità: Potete ora scegliere se ordinare gli elementi della vostra lista in orizzontale o in verticale
  • Non c’è bisogno di modificare il vostro HTML. Semplicemente invocate il plugin sulla lista utilizzando uno qualsiasi tra i selettori jQuery
  • Pesa solo 4KB!
  • Non dipende da altri plugin!

Aggiunte previste

Sono totalmente aperto a nuovi suggerimenti. Segue una lista delle funzionalità che verranno aggiunte nella prossima versione e che sono state richieste nei vostri commenti:

  • Permettere una classe personalizzata sul DIV contenitore

Utilizzo

Qui di seguito trovate il codice HTML per una semplice lista non ordinata:

  • Lorem ipsum 1
  • Donec pede 2
  • Fringilla vel 3
  • Eget arcu 4
  • In enim 5
  • Lorem farem 6

Dobbiamo ora includere tre file differenti nella head del documento: la libreria di jQuery, il plugin Easy List Splitter e il nostro file JavaScript dal quale attiveremo il plugin. Se non sapete come fare a includere jQuery nelle vostre pagine trovate una spiegazione dettagliata nel mio primo tutorial per jQuery.

Potete chiamare il plugin su qualunque lista utilizzando i potenti selettori jQuery. Il plugin richiede un solo argomento in entrata, il numero di colonne in cui suddividere la lista.

Nell’esempio che segue vi mostrerò come attivare il plugin utilizzando una classe come selettore. Tenete presente che potete anche chiamare il plugin direttamente sull’elemento UL o OL (es. $(‘ul’)). Se non definite un valore per il parametro colNumber, il plugin genererà due colonne di default:

$('.my-list').easyListSplitter({ colNumber: 3 });

Inoltre, se non specificate il parametro ‘direction‘, il pugin ordinerà di default gli elementi della lista in modo verticale come mostrato di seguito:

list item 1      list item 4      list item 7
list item 2      list item 5      list item 8
list item 3      list item 6

Dalla versione 1.0.1 potete scegliere se ordinare gli elementi della vostra lista in verticale, come mostrato sopra, oppure in orizzontale come nell’esempio che segue:

list item 1      list item 2      list item 3
list item 4      list item 5      list item 6
list item 7      list item 8

Ciò che dovete fare è impostare il parametro direction su horizontal quando chiamate il plugin:

$('.my-list').easyListSplitter({
   colNumber: 3,
   direction: 'horizontal'
});

Aggiungere il CSS

Qui viene la parte più facile. Il plugin ha diviso la nostra lista in diverse liste. Per ottenere un layout a multi-colonne sarà sufficiente scrivere un po’ di CSS. Potrete sia modificare quello presente nell’esempio, sia scrivere delle nuove regole. In sostanza, vogliamo semplicemente impostare la proprietà float su tutte le liste e applicare alle stesse un po’ di margine.

Conclusioni

Questo plugin è totalmente gratuito. Puoi scaricare l’esempio completo del plugin Easy List Splitter qui (8KB – ZIP) oppure scaricare il solo file JavaScript del plugin.