jQuery UI Selectable - 取消選擇點擊選項

有誰知道是否有一種方法來配置一個jQueryUI的可選元素來取消選中元素，當你點擊它？有點像一個切換。如果它已被選中，請取消選擇它，否則執行默認行爲。jQuery UI Selectable - 取消選擇點擊選項

謝謝。

2010-10-15 fehays

我對回答您的問題的時間非常晚，但讓我回答一下，以便將其作爲其他人的參考。

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

這將使你正在尋找的切換行爲。

來源

2012-09-25 22:28:59

感謝分享。這確實很好。 – fehays 2012-09-26 00:04:15

我看到它按預期工作，但老實說，我不明白！你能解釋爲什麼這個代碼工作（我的意思是它是如何取消選擇第二次點擊？） – HungryCoder 2013-01-13 09:45:32

這只是將metaKey（Ctrl）添加到「mousedown」事件，這迫使相同的行爲，如果你會按Ctrl自己。 – Novalis 2013-05-16 09:03:36

這是你的意思嗎？

在選擇操作結束時，從選擇中刪除每個元素時觸發此事件。

代碼示例

提供一個回調函數來處理未選定的事件進行選擇。

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

來源

2010-10-15 22:04:22 Trufa

那麼我需要的是觸發這個未選定的事件時，單擊一個選定的元素。現在，這個事件只會在我點擊另一個可選元素時觸發。 – fehays 2010-10-15 22:31:10

那麼這裏就是我剛剛結束了做。我使用類名切換選擇和取消選擇。我很想聽聽是否有另一種選擇：

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

來源

2010-10-15 22:40:28 fehays

啊，好了，現在我明白你的意思了！抱歉！ – Trufa 2010-10-15 22:51:13

沒問題@Trufa。我相信我沒有很好地解釋它。感謝您的幫助。 – fehays 2010-10-15 23:29:54

請注意，爲了切換類名稱，您可以簡單地使用'toggleClass（「selectedFilter」）'。不需要檢查一個元素是否有類。 ToggleClass爲你做到這一點。 – Kriem 2012-05-03 11:25:21

如果你想現有的選擇保存，但有切換的操作，您只需忽略給出的解決方案未選擇的事件。你也需要刪除UI選擇的類。

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

來源

2011-09-23 15:12:03

jQuery UI Selectable - 取消選擇點擊選項

回答

相關問題