jQuery UI sélectionnable - désélectionner l'élément sélectionné au clic

Question

Est-ce que quelqu'un sait s'il existe 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 c'est déjà sélectionné, désélectionnez-le, sinon faites le comportement par défaut.

Merci.

Answer 1

Je suis très en retard dans la réponse à votre question, mais permettez-moi de répondre de toute façon afin de le garder comme référence pour les autres.

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

cela permettra le comportement de bascule que vous recherchez.

Answer 2

Est-ce que c'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

offre une fonction de rappel pour gérer l'événement comme une option non sélectionnée init.

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

Answer 3

Eh bien voici ce que je viens fini par faire. J'ai utilisé un nom de classe pour basculer entre sélection 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 4

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. Vous devez également supprimer la classe sélectionnée par l'interface utilisateur.

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