jQuery UI - 可选小部件 - 如何禁用多选?

时间:2012-10-26 16:38:58

标签: jquery-ui jquery-ui-selectable

在jquery ui可选小部件中,我注意到你可以通过按住ctrl(或拖动一个框)来选择多个项目,但是如何禁用多重选择。我只希望能够一次选择1个。

感谢。

3 个答案:

答案 0 :(得分:7)

这是一个相当粗略的实施:http://jsfiddle.net/rtRjK/

基本上,当选择一个元素时,首先取消选择所有已选择的兄弟节点 - 这会处理ctrl-clicks。接下来,迭代选择和取消选择它们的兄弟姐妹 - 这会处理拖动。因此,拖动始终采用具有最大y坐标的元素。

您还可以滚动自己的可选小部件。我从_mouseDrag移除了ctrl键引用和$.ui.selectable函数:http://jsfiddle.net/zFFXc/

答案 1 :(得分:0)

$("#myList li").click(function() {
  $(this).addClass("selected").siblings().removeClass("selected");
});

答案 2 :(得分:0)

可选择,单选,带键盘

//after load
$(function() {

    // make <ol id=lista> selectable (jquery UI)
    $("#lista").selectable();
    $("#lista").children(":first-child").addClass("selected"); //select first

    $(document).keydown(function(ev) { //con keyboard

        var actual = $(".selected");
        switch (ev.keyCode) {

            case 13: // User pressed "enter" key
                actual.dblclick();
                ev.preventDefault();
                break;

            case 38: // User pressed "up" arrow
                actual.prev().click();
                ev.preventDefault();
                break;

            case 40: // User pressed "down" arrow
                actual.next().click();
                ev.preventDefault();
                break;
        }
    }); //end keydown

    //single select
    $("#lista li").click(function() {
        $(this).addClass("selected").siblings().removeClass("selected");
    });

}); // end $(fn...
相关问题