화살표 키 갤러리 탐색

Question

this image gallery에 화살표 키 탐색을 추가하려고합니다.

그것은 this

var chosen = ""; 
$(document).keydown(function (e) { // 38-up, 40-down 
    if (e.keyCode == 40) { 
     if (chosen === "") { 
      chosen = 0; 
     } else if ((chosen + 1) < $('li.t').length) { 
      chosen++; 
     } 
     $('li.t').removeClass('selected'); 
     $('li.t:eq(' + chosen + ')').addClass('selected'); 
     $('li.t').click(this); 
     return false; 
    } 
    if (e.keyCode == 38) { 
     if (chosen === "") { 
      chosen = 0; 
     } else if (chosen > 0) { 
      chosen--; 
     } 
     $('li.t').removeClass('selected'); 
     $('li.t:eq(' + chosen + ')').addClass('selected'); 
     $('li.t').click(this); 
     return false; 
    } 
}); 

유사한 작동합니다 ...하지만 나는 그것이 iframe에 페이지를로드하고 동시에 다른 클릭 동작을 수행해야하기 때문에 각 화살표 키를 눌러 이동 (클릭처럼 작동 할 새로 선택한 엄지 손톱에 노란색 프레임)을 클릭하면됩니다.

또한 화살표 키로 이동하면 선택한 축소판을보기 위해 강제로 스크롤 할 수 있습니다.

... 내가 작동하게되면 다음 문제는 iframe 내에서 무언가가 클릭 될 때마다 기본 페이지와 화살표 키 탐색에 초점을 잃게 될 것이라고 상상해보십시오. 이것은 무시할 수있는 문제이지만 간단한 해결책이 있다면 그것을 사용하고 싶습니다.

감사합니다.

Answer 1

제공 한 jsfiddle을 사용하면 jquery의 trigger() 메소드를 사용하여 사용자 클릭을 시뮬레이션 할 수 있습니다.

$('li:eq('+whichIndex+') a').trigger("click"); 

이로 인해 클릭 이벤트의 현재 코드가 실행됩니다. 이런 식으로 클릭이나 키 누름을 추적하는 로직에 대해 걱정할 필요가 없습니다.

자바 스크립트이 샘플에서

var chosen = ""; 
$(document).keydown(function(e){ // 38-up, 40-down 
    chosen = $('li.selected').index(); //grab the current selection 
    if (e.keyCode == 40) { 
     if(chosen === "") { 
      chosen = 0; 
     } else if((chosen+1) < $('li').length) { 
      chosen++; 
     } 
     selectImage(chosen); 
     return false; 
    } 
    if (e.keyCode == 38) { 
     if(chosen === "") { 
      chosen = 0; 
     } else if(chosen > 0) { 
      chosen--;    
     } 
     selectImage(chosen); 
     return false; 
    } 
}); 

function selectImage(whichIndex) { 
    $('li:eq('+whichIndex+') a').trigger("click"); 
} 
$("#selection a").click(function() { 
    $('li').removeClass('selected'); 
    $(this).parent().addClass('selected'); 
}); 

는를 keyDown 이벤트는 단순히해야하는 요소 파악 다음 "선택". 일단 발견되면 selectImage() 함수가 호출됩니다.이 함수는 기본적으로 선택한 요소에서 마우스 클릭을 시뮬레이트합니다.

요소를 클릭하면 (사용자 클릭이든, jquery를 통해 호출 된 클릭이든) 이전 요소를 선택 취소하고 새 요소를 선택하는 실제 논리가 실행됩니다.

이의 작업 예제와 함께 바이올린 여기 http://jsfiddle.net/DPHWZ/