MICHELEPISANI.IT

jQuery UI: guida all'uso delle interazioni

Clicca su un elemento all'interno di una lista per selezionarlo

Selezionare e deselezionare elementi di una lista con jQuery UI Selectable

Marzo 02
07:042015

Selezioniamo continuamente elementi durante la nostra navigazione in rete e spesso nasce l'esigenza di associare una funzione al momento in cui avviene una selezione (o deselezione). Il metodo "selectable" della libreria jQuery UI ci viene incontro ed assegnandolo ad un elemento del DOM, sia esso una lista, una tabella o qualsiasi altro elemento, questo assumerà la capacità di essere selezionabile con un semplice click del mouse, potendolo così recuperare per operazioni successive.

Per prima cosa la nostra pagina dovrà inludere le librerie jQuery e jQuery UI tra i tag script nell'head (quelle elencate di seguito assicurano il corretto funzionamento del codice di esempio):

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js

E' necessario creare un elemento a cui associare la funzionalità, nel caso specifico una lista non ordinata:

<ul id="selezionabile" class="ui-widget">
    <li class="ui-widget-content ui-corner-all">Elemento 1</li>
    <li class="ui-widget-content ui-corner-all">Elemento 2</li>
    <li class="ui-widget-content ui-corner-all">Elemento 3</li>
    <li class="ui-widget-content ui-corner-all">Elemento 4</li>
    <li class="ui-widget-content ui-corner-all">Elemento 5</li>
    <li class="ui-widget-content ui-corner-all">Elemento 6</li>
    <li class="ui-widget-content ui-corner-all">Elemento 7</li>
</ul>

Un minimo di CSS::

ul {margin: 0; padding: 0; list-style-type: none; width: 50%;}
ul li {padding: 0.4em; margin: 0.2em; cursor: pointer; font-size: 0.8em;}

Ed infine il fulcro della questione, l'assegnazione del metodo all'elemento. Nel codice di esempio faccio uso di 2 eventi relativi al widget "selectable", nello specifico selected e unselected, che gestiscono funzioni rispettivamente nel momento in cui si seleziona e si deseleziona un elemento. In questo caso faccio in modo che quando un elemento viene selezionato si deselezionano automaticamente gli altri (rimuovere la funzione associata ad unselected per evitare questo comportamento), inoltre quando si clicca su un elemento già selezionato lo stesso si deselezionerà :

$( "#selezionabile" ).selectable({
    selected: function( e, ui ) {
        if ($( ui.selected ).hasClass( "ui-state-highlight" )) {
            $( ui.selected ).removeClass( "ui-state-highlight" );
        } else {
            $( ui.selected ).addClass( "ui-state-highlight" );
        }
    },    
    unselected: function( e, ui ) {
        $( ui.unselected ).removeClass( "ui-state-highlight" );    
    }
});


Potete vedere il codice in funzione nell'esempio che ho creato su JSFiddle e che potete testare direttamente nel codice seguente all'interno del tab "Result":



Per un approfondimento sulle opzioni, metodi ed eventi utilizzabili rimando alla documentazione ufficiale del widget draggable sul sito di jQueryUI.


Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Ciao alessandro,
questa regex dovrebbe fare al caso tuo:

alessandro

ciao sto cercando una regex per numeri interi o decimali, positivi o negativi; la tua regex mi pare …

Michele Pisani

Ciao Nicola,
ti riferisci per caso alla situazione di gianluigi?
In tutti i casi la via …

Nicola

Ciao Michele, mi trovo nella medesima situazione in cui si trovava Gianluca un anno fa. Sei poi …