2012-10-26 4 views
4

jquery UI에서 선택 가능한 위젯에서 ctrl (또는 상자를 드래그하여)을 사용하여 둘 이상의 항목을 선택할 수 있지만 다중 선택을 비활성화하는 방법은 알 수있었습니다. 한 번에 하나씩 만 선택할 수 있기를 원합니다.jQuery UI - 선택 가능한 위젯 - 다중 선택을 비활성화하는 방법?

감사합니다. 이 CTRL-클릭 핸들 - 요소가 선택된 경우 http://jsfiddle.net/rtRjK/

기본적으로, 최초 선정 된 모든 형제 선택 해제 :

답변

7

이 상당히 조 구현이다. 다음으로, 그들을 선택하고 선택을 해제하고있는 형제들을 반복합니다. 이것은 드래그를 처리합니다. 결과적으로 끌기는 항상 가장 큰 y 좌표로 요소를 가져옵니다.

자신 만의 선택 가능한 위젯을 굴릴 수도 있습니다. 나는 $.ui.selectable에서 CTRL 키 참조 및 _mouseDrag 기능을 제거 : http://jsfiddle.net/zFFXc/

+0

singleselectable 플러그인이 훨씬 청소기입니다 함께. Up-voted this answer는 "당신도 할 수 있습니다 ..."부분은 내가 읽었던 다른 모든 답변들이 깨끗하고 전문적인 UI가 아니라 해킹 된 것입니다. 건배 –

0
$("#myList li").click(function() { 
    $(this).addClass("selected").siblings().removeClass("selected"); 
}); 
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... 
관련 문제