Pubblicato il

Creare un menu a lista in ordine alfabetico con jQuery

Autori
Menu a lista in ordine alfabetico con jQuery

ListMenu è un plugin jQuery che permette di convertire facilmente una lunga lista di elementi, difficile da navigare, in un sistema compatto di menu a liste visualizzate in ordine alfabetico, in modo che si presenti graficamente più pulita e di rapido accesso agli elementi.

jQuery ListMenu l’ho trovato molto utile per la presentazione di lunghe liste di contatti, prodotti, liste di cose, etc. Il risultato è un insieme di menu di liste su cui risulta facile spostarsi con il mouse su una lettera e un elenco a colonne di tutte le voci che iniziano con quella lettera appaiono in un sottomenu. Spostarsi tra le lettere è molto veloce e le colonne nei sottomenu sono ben bilanciate.

Se il tag utilizzato per rappresentare la lista è OL, la numerazione inizia da 1 in ogni sottomenu e si svolge tra le colonne, dall’alto verso il basso, da sinistra verso destra, mantenendo una sequenza logica.
Gli elementi della lista che iniziano con caratteri numerici vengono inclusi nella voce di menu opzionale [0-9]; mentre gli elementi che iniziano con caratteri di punteggiatura o non rappresentati nell’alfabeto visualizzato vengono raccolti nella voce di menu […], sempre opzionale.
Le voci di menu che non contengono elementi appaiono disabilitate.

Utilizzo

Nell’intestazione (<head>…</head>) della nostra pagina html, dopo aver richiamato la libreria jQuery, includiamo il plugin ListMenu e il codice javascript che crea il menu di liste:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.listmenu-1.1.js"></script>
<script type="text/javascript">
  $(function () {
    $('#lista').listmenu()
  })
</script>

Aggiungiamo il codice HTML che crea la nostra lista di elementi con l’attributo id con valore lista indicato sopra nel selettore jQuery:

<ul id="lista">
  <li><a href="#">2 elemento</a></li>
  <li><a href="#">A elemento</a></li>
  <li><a href="#">A elemento</a></li>
  <li><a href="#">B elemento</a></li>
  <li><a href="#">C elemento</a></li>
  <li><a href="#">E elemento</a></li>
  <li><a href="#">F elemento</a></li>
  <li><a href="#">L elemento</a></li>
  <li><a href="#">Z elemento</a></li>
  etc...
</ul>

E’ possibile utilizzare qualsiasi selettore jQuery con .listmenu(). Ad esempio, se nella stessa pagina sono presenti più liste e si desidera attivare su tutte le stesse opzioni di ListMenu e tutte hanno associata la stessa classe lista, si potrebbe realizzare semplicemente in questo modo:

$(function () {
  //imposta le stesse opzioni per tutte le liste con classe lista
  $('.lista').listmenu()
})

Opzioni

E’ possibile inizializzare il plugin modificando le impostazioni predefinite in base alle proprie esigenze:

  • includeNums [default: true]: true mostra nella barra la voce di menu [0-9].
  • includeOther [default: false]: true mostra nella barra la voce di menu […].
  • flagDisabled [default: true]: true applica la classe per mostrare disattivate quelle lettere che non hanno elementi nell’elenco.
  • noMatchText [default: ‘No entries matching’]: questo è il testo che appare al posto dell’elenco, se non sono presenti voci corrispondenti ad una lettera; impostare un proprio testo per sostituire quello predefinito.
  • showCounts [default: true]: true visualizza il numero di elementi quando ci spostiamo con il mouse su una lettera.
  • menuWidth [default: null]: il plugin calcola una larghezza per il menu a discesa utilizzando la larghezza degli elementi visualizzati; specificare con un valore numerico se si vuole forzare la larghezza del menu.
  • cols [default: {count: 4, gutter: 40}]: per impostazione predefinita l’elenco di oggetti per ogni lettera di navigazione sono convertiti in 4 colonne (‘count’) con uno spazio di 40px (‘gutter’) tra di loro.
  • onClick [default: null]: forniture una propria funzione per gestire i clic sugli elementi dei menu a discesa.

jQuery ListMenu plugin è sviluppato da iHwy, i quali dedicano una pagina al progetto ListMenu dove poter scaricare il plugin, visualizzare le demo e ottenere ulteriori informazioni, aggiornamenti e assistenza.

Discutiamone su Twitter