JQuery UI sélectionnable - élément Unselect sélectionnée en cliquant dessus

Question

Est-ce que quelqu'un sait s'il y a un moyen de configurer un élément jquery ui sélectionnable pour désélectionner l'élément sélectionné lorsque vous cliquez dessus? Un peu comme une bascule. Si elle est déjà sélectionnée, décochez, sinon faire le comportement par défaut.

Merci.

Answer 1

Je suis très tard pour répondre à votre question, mais permettez-moi simplement y répondre de toute façon que de le garder comme référence pour les autres.

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

cela permettra le comportement à bascule que vous recherchez.

Answer 2

Et bien voici ce que je viens fini par faire. J'ai utilisé un nom de classe pour sélectionner bascule et désélection. J'aimerais entendre s'il y a une autre option:

$("#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

Si vous voulez que les sélections existantes soient préservées et encore avoir l'opération de bascule, il vous suffit d'ignorer l'événement pour la solution désélectionné donnée. Aussi, vous devez supprimer la classe ui-sélectionnée.

$("#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

Est-ce que vous voulez dire?

Cet événement est déclenché à la fin de l'opération de sélection, sur chaque élément retiré de la sélection.

exemples de code

Fournir une fonction de rappel afin de gérer l'événement non sélectionné comme option d'initialisation.

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

Source:

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