如何在JQuery UI Selectable上实现切换功能

How to implement toggle functionality on JQuery UI Selectable?

本文关键字：实现 功能 Selectable JQuery UI      更新时间：2023-09-26

我使用JQuery UI -可选择的。我想取消选中的元素，如果它已被按下，它已经被选中(切换)

你能帮我添加这个功能吗?

由于所有的类回调，您不会做得比这更好:

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

如果你在点击时按住Ctrl键，你已经有了jQuery UI可选择的功能。

如果你真的需要它作为默认功能，你不需要使用selectable，你可以像nolabel建议的那样，把它作为一个简单的onclick处理程序来实现。

还是……你也可以编辑jquery.ui.selectable.js并添加一个你需要的选项。应该不会太难，有4个地方事件。metaKey被选中，确保你的选项被设置，只运行代码路径，如果事件。我一直都是真的。

由于selectables可以使用更多的自定义，您也可以向jQuery UI开发人员提出特性请求，以便在下一个正式版本中包含它。

您必须在代码中注入两个简单的元素来实现您想要的效果。当你需要反转/切换功能时，这只是反转metaKey布尔值。

options: {
    appendTo: 'body',
    autoRefresh: true,
    distance: 0,
    filter: '*',
    tolerance: 'touch',
    inverted: false /* <= FIRST*/
},
_mouseStart: function(event) {
    var self = this;
    this.opos = [event.pageX, event.pageY];
    if (this.options.disabled)
        return;
    var options = this.options;
    if (options.inverted) /* <= SECOND*/
        event.metaKey = !event.metaKey; /* <= SECOND*/
相关文章：