미리 보기 도구 모음의 클릭에 응답

고정된 사이트에 대한 미리 보기 도구 모음 만들기 작업에서는 단추들을 추가하고 미리 보기 도구 모음을 표시하는 방법을 보았습니다. 이 작업에서는 단추 클릭에 응답할 수 있는 이벤트 처리기를 만듭니다.

참고  미리 보기 도구 모음은 새로운 Windows UI의 Internet Explorer 10에 있는 고정된 사이트에 사용할 수 없습니다.

이 작업에서 사용되는 메서드

이 항목에서 소개되는 이벤트는 다음과 같습니다.

onmsthumbnailclick

document.onmsthumbnailclick 이벤트는 사용자가 미리 보기 도구 모음의 단추를 클릭할 때 발생합니다.

이벤트 처리기 만들기

사용자가 미리 보기 도구 모음의 단추를 클릭하면 Windows Internet Explorer 9에서 onmsthumbnailclick 이벤트를 보냅니다. 사용 중인 문서 모드에 따라 이벤트 등록 방법이 달라집니다. 문서 모드에 대한 자세한 내용은 문서 호환성 정의를 참조하세요. 안전을 위해 기능 감지를 사용하여 이벤트 처리기를 등록하는 최상의 방법을 찾아보세요. 먼저, addEventListener 메서드를 확인하고 attachEvent를 대안으로만 사용하세요.


if (document.addEventListener) {
    document.addEventListener('msthumbnailclick', onButtonClicked, false);
}
else if (document.attachEvent) {
    document.attachEvent('onmsthumbnailclick', onButtonClicked);
}


처리기는 단추 ID를 사용하여 이벤트를 디스패치하게 됩니다. 고정된 사이트에 대한 미리 보기 도구 모음 만들기 항목에서는 도구 모음 단추들을 만들고 msSiteModeAddThumbBarButton 메서드가 단추 ID를 반환해서 여러분이 전역 변수에 저장했습니다. 이제 다음 코드 예제와 같이 이러한 변수를 사용하여 어떤 단추가 클릭되었는지 확인합니다.


function onButtonClicked(btn)
{
    switch (btn.buttonID) {
        case btnPrev:
            previousTrack();
            break;
        case btnPlayPause:
            playPause();
            break;
        case btnNext:
            nextTrack();
            break;
    }
}


다음 단계

재생/일시 중지 단추가 두 오디오 상태 간에 실제로 어떻게 전환되는지 확인했을 것입니다. 미리 보기 도구 모음의 단추 상태 전환 작업에서는 도구 모음 단추를 한 개만 사용하여 이 효과를 만듭니다.

웹 사이트가 구현된 방식에 따라 다음이전 단추를 클릭할 때 재생 목록의 끝이나 시작에 도달했는지 확인해야 할 수도 있습니다. 이 작업을 수행하는 방법은 미리 보기 도구 모음의 단추 사용 안 함 및 숨기기 작업을 참조하세요.

관련 항목

작업
고정된 사이트에 대한 미리 보기 도구 모음 만들기
미리 보기 도구 모음의 단추 사용 안 함 및 숨기기
미리 보기 도구 모음의 단추 상태 전환
개념
미리 보기 도구 모음을 만드는 방법
고정된 사이트 소개

 

 

표시:
© 2014 Microsoft