代码之家 › 专栏 › 技术社区 › fehays

jquery用户界面可选-单击取消选择所选项

unselect jquery-ui-selectable selectable jquery-ui jquery

13

fehays · 技术社区 · 15 年前

是否有人知道有没有一种方法可以配置jquery ui可选元素,以便在单击时取消选中所选元素?有点像拨动开关。如果它已经被选中,取消选中它,否则执行默认行为。

谢谢。

4 回复 | 直到 13 年前

1

39

Keith Socheath Chea 14 年前

我回答你的问题已经很晚了,不过还是让我来回答吧,这样就可以作为别人的参考了。

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

这将允许您要查找的切换行为。

2

11

fehays 15 年前

好吧,这就是我刚刚做的。我使用类名来切换选择和取消选择。如果还有其他选择,我很想听听:

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

3

2

Tom 13 年前

如果您希望保留现有的选择,但仍有切换操作,您只需忽略给定解决方案的未选择事件。此外,还需要删除用户界面选择的类。

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

4

0

Trufa 15 年前

这就是你的意思吗?

此事件在选择操作结束时在从选择中移除的每个元素上触发。

代码示例

提供回调函数以作为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