jQuery यूआई चयन योग्य -

Question

पर चयनित आइटम का चयन रद्द करें क्या किसी को पता है कि जब आप इसे क्लिक करते हैं तो चयनित तत्व को अचयनित करने के लिए jquery ui चयन करने योग्य तत्व को कॉन्फ़िगर करने का कोई तरीका है? टॉगल की तरह सॉर्ट करें। यदि यह पहले से ही चुना गया है, तो इसे अचयनित करें, अन्यथा डिफ़ॉल्ट व्यवहार करें।

धन्यवाद।

Answer 1

मुझे आपके प्रश्न का जवाब देने में बहुत देर हो चुकी है, लेकिन मुझे इसे अभी भी जवाब दें ताकि इसे दूसरों के संदर्भ में रखा जा सके।

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

इससे टॉगल व्यवहार की अनुमति मिल जाएगी जो आप खोज रहे हैं।

Answer 2

क्या इसका मतलब है?

यह घटना चयन से हटाए गए प्रत्येक तत्व पर, चयनित ऑपरेशन के अंत में ट्रिगर की गई है।

कोड उदाहरण

आपूर्ति एक कॉलबैक फ़ंक्शन एक init विकल्प के रूप में नहीं चुना जाता घटना को संभालने के लिए।

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

स्रोत:

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

Answer 3

खैर यहाँ क्या मैं सिर्फ कर समाप्त हो गया है। मैंने चयन करने और अचयनित करने के लिए कक्षा का नाम उपयोग किया। मैं अगर वहाँ एक और विकल्प है जानकर अच्छा लगेगा:

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

आप चाहते हैं कि मौजूदा चयन संरक्षित किया और अभी तक टॉगल आपरेशन है, तो आप बस समाधान दिया के लिए नहीं चुना जाता घटना की अनदेखी करने की जरूरत है। इसके अलावा आपको यूई-चयनित कक्षा को हटाने की जरूरत है।

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