Responding to Clicks on the Thumbnail Toolbar

  • Article

In the Creating a Thumbnail Toolbar for a Pinned Site task, you saw how to add buttons and display the Thumbnail Toolbar. In this task, you create an event handler that can respond to button clicks.

Note  The Thumbnail Toolbar is not available with Pinned Sites in Internet Explorer 10 on the new Windows UI.

 

  • Methods Used in this Task
    • onmsthumbnailclick
  • Creating the event handler
  • Next Steps
  • Related topics

Methods Used in this Task

The following event is introduced in this topic:

onmsthumbnailclick

The document.onmsthumbnailclick event occurs when the user clicks a button in a Thumbnail Toolbar.

Creating the event handler

When a user clicks a button on the Thumbnail Toolbar,Windows Internet Explorer 9 sends an onmsthumbnailclick event. How you register for the event changes depending on which document mode you are using. (For more information about document modes, see Defining Document Compatibility.) To be safe, use feature detection to look for the best way to register the event handler. First, check for the addEventListener method, and use attachEvent only as an alternative.

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

The handler will dispatch the event by using the button ID. In the Creating a Thumbnail Toolbar for a Pinned Site topic, you created the toolbar buttons, and the msSiteModeAddThumbBarButton method returned a button ID, which you saved in a global variable. You use those variables now to determine which button was clicked, as as shown in the following code example.

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

Next Steps

You might have noticed how the Play/Pause button is really switching between two audio states. In the Toggling Button State on a Thumbnail Toolbar task, you create this effect by using only one toolbar button.

Depending on how a website is implemented, clicking the Next and Previous buttons might need to identify when the end or beginning of the play list is reached. You learn to do this in the Disabling and Hiding Buttons on a Thumbnail Toolbar task.

Tasks

Creating a Thumbnail Toolbar for a Pinned Site

Disabling and Hiding Buttons on a Thumbnail Toolbar

Toggling Button State on a Thumbnail Toolbar

Conceptual

How to Create Thumbnail Toolbars

Introduction to Pinned Sites