jQuery UI selezionabile - deselezionare elemento selezionato al clic

Question

Qualcuno sa se c'è un modo per configurare un elemento di jQuery UI selezionabile per deselezionare l'elemento selezionato quando si fa clic? Un po 'come un interruttore. Se è già selezionata, deselezionare, altrimenti fare il comportamento predefinito.

Grazie.

Answer 1

Sono molto in ritardo nel rispondere alla tua domanda, ma lasciatemi rispondere comunque in modo da tenerlo come riferimento per gli altri.

$( ".selector" ).bind( "mousedown", function ( e ) {
    e.metaKey = true;
} ).selectable();

questo permetterà il comportamento di commutazione che stai cercando.

Answer 2

Bene, ecco quello che ho appena finito per fare. Ho usato un nome di classe per la selezione a levetta e deselezionando. Mi piacerebbe sapere se c'è un'altra opzione:

$("#selectable").selectable({
    selected: function (event, ui) {
        if ($(ui.selected).hasClass('selectedfilter')) {
            $(ui.selected).removeClass('selectedfilter');
            // do unselected stuff
        } else {            
            $(ui.selected).addClass('selectedfilter');
            // do selected stuff
        }
    },
    unselected: function (event, ui) {
        $(ui.unselected).removeClass('selectedfilter');
    }
});

Answer 3

Se si vuole che le selezioni esistenti essere conservato e hanno ancora l'operazione di commutazione, è sufficiente ignorare l'evento non selezionato per la soluzione data. Inoltre è necessario rimuovere la classe ui-selezionato.

$("#selectable").selectable({
selected: function (event, ui) {
    if ($(ui.selected).hasClass('selectedfilter')) {
        $(ui.selected).removeClass('selectedfilter').removeClass('ui-selected');
        // do unselected stuff
    } else {            
        $(ui.selected).addClass('selectedfilter').addClass('ui-selected');
        // do selected stuff
    }
}
});

Answer 4

E 'questo che vuoi dire?

Questo evento viene attivato al termine l'operazione di selezione, su ciascun elemento rimosso dalla selezione.

Esempi di codice

Alimentazione una funzione di callback per gestire l'evento non selezionato come opzione init.

$( ".selector" ).selectable({
   unselected: function(event, ui) { ... }
});
Bind to the unselected event by type: selectableunselected.
$( ".selector" ).bind( "selectableunselected", function(event, ui) {
  ...
});

Fonte:

http://jqueryui.com/demos/selectable/#event-unselected