サムネイル ツールバーのクリックに応答する

タスク "ピン留めされたサイトのサムネイル ツールバーを作成する" では、ボタンを追加し、サムネイル ツールバーを表示する方法について説明しました。このタスクでは、ボタンのクリックに応答できるイベント ハンドラーを作成します。

  新しい 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;
    }
}


次のステップ

[再生/一時停止] ボタンが 2 つのオーディオの状態間で実際にどのように切り替わるかがわかったと思います。タスク "サムネイル ツールバーのボタンの状態を切り替える" では、ただ 1 つのツール バー ボタンを使ってこの効果を作成します。

Web サイトの実装方法によっては、[次へ] ボタンと [前へ] ボタンのクリック操作は、再生リストが最後または最初に達したことを認識する必要があります。タスク "サムネイル ツールバーのボタンを無効および非表示にする" で、この方法について学習します。

関連トピック

タスク
ピン留めされたサイトのサムネイル ツールバーを作成する
サムネイル ツールバーのボタンを無効および非表示にする
サムネイル ツールバーのボタンの状態を切り替える
概念
サムネイル ツールバーの作成方法
ピン留めされたサイトについて

 

 

表示:
© 2014 Microsoft