Export (0) Print
Expand All
This topic has not yet been rated - Rate this topic

Creating a Thumbnail Toolbar for a Pinned Site

This task explains how to create and display a basic Thumbnail Toolbar for a Pinned site.

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

Methods Used in this Task

The following methods are introduced in this topic:

msSiteModeAddThumbBarButton(bstrIconURL, bstrTooltip)

You use the window.external.msSiteModeAddThumbBarButton method to add a 16x16 pixel button to the Thumbnail Toolbar.

msSiteModeShowThumbBar()

You use the window.external.msSiteModeShowThumbBar method to enable the Thumbnail Toolbar.

Planning your toolbar interface

A Thumbnail Toolbar is essentially a "remote control" for your site. The toolbar appears underneath the thumbnail preview when you hover over a Pinned Site's taskbar button. This feature is especially useful for sites that implement video or audio playback, but many such possibilities exist. Thumbnail Toolbar buttons might include:

  • Play/Pause
  • Previous/Next (Skip)
  • Favorite (I like this...)
  • Share (Social Bookmark)
  • Search (More Info)
  • Change Status (Online/Offline)
  • Buy Now
  • Rate

As you decide which commands to make available on your toolbar, consider the following guidelines:

  • You cannot add buttons to a toolbar after the toolbar is visible. However, you can temporarily hide or disable buttons that are not needed. For more information, see Disabling and Hiding Buttons on a Thumbnail Toolbar.
  • A Thumbnail Toolbar can hold a maximum of seven buttons. The size of the thumbnail preview window limits the number of buttons you can display. In practice, this means that some buttons must perform double duty. For example, you might not need both a Pause and a Stop button, because the sound stops in either case. You can save even more space by using a single button for both Play and Pause. For more information about how to maximize space on the Thumbnail Toolbar, see Toggling Button State on a Thumbnail Toolbar.
  • The toolbar and its buttons are created for the lifetime of the tab. Even if you navigate away from the original page, the same toolbar and buttons are available to subsequent pages. You should start the toolbar with all the buttons you require, and re-create the toolbar in the same way on each page of your website.

Creating toolbar buttons

Creating a Thumbnail Toolbar is a two-step process. Before you can display the toolbar, you must first create buttons by using the msSiteModeAddThumbBarButton method, as shown in the following code example.


// Add buttons
btnPrev = window.external.msSiteModeAddThumbBarButton('Images/prev.ico', 'Previous');
btnPlayPause = window.external.msSiteModeAddThumbBarButton('Images/play.ico', 'Play');
btnNext = window.external.msSiteModeAddThumbBarButton('Images/next.ico', 'Next');


Each button is assigned an ID when it is created. Make sure to save this value so that you can retrieve it later. When a button is clicked, the button ID will enable you to tell the buttons apart. If the toolbar was created earlier in the lifetime of the tab, the same button ID values are returned when you create the toolbar again. Just remember to use the same icon URL and tooltip text that you used when you created the toolbar the first time.

Note  The original icon and tooltip are considered style zero (0) for purposes of msSiteModeShowButonStyle. For more information, see Toggling Button State on a Thumbnail Toolbar.

Finally, you display the toolbar by calling the msSiteModeShowThumbBar method.


// Show toolbar
window.external.msSiteModeShowThumbBar();


Putting It All Together

The Channel9 Podcast Player sample application provides three buttons to control audio playback, as shown in the following screen shot.

Thumbnail toolbar that includes Previous, Play, and Next buttons

The following codes example shows how to create these three buttons.


// Add buttons
btnPrev = window.external.msSiteModeAddThumbBarButton('Images/prev.ico', 'Previous');
btnPlayPause = window.external.msSiteModeAddThumbBarButton('Images/play.ico', 'Play');
btnNext = window.external.msSiteModeAddThumbBarButton('Images/next.ico', 'Next');


Next Steps

At this point, you have a visible Thumbnail Toolbar that has three buttons that do not operate you click them. In the next task, Responding to Clicks on the Thumbnail Toolbar, you learn how to write an event handler for your toolbar.

More Examples

HuffingtonPost.com

HuffingtonPost.com's Thumbnail Toolbar with buttons for Facebook and Twitter

HuffingtonPost.com uses a Thumbnail Toolbar with buttons for Facebook and Twitter.

When the user clicks on one of the toolbar buttons, a pop-up window appears for the chosen social network and then the user can share the current article with friends, followers, or people.

DiscoveryChannel.com

DiscoveryChannel.com's Thumbnail Toolbar with buttons for Facebook, Twiitter, Digg, and Social Buzz

DiscoveryChannel.com uses a Thumbnail Toolbar with buttons for Facebook, Twitter, Digg, and Social Buzz.

Related topics

Tasks
Disabling and Hiding Buttons on a Thumbnail Toolbar
Responding to Clicks on the Thumbnail Toolbar
Toggling Button State on a Thumbnail Toolbar
Conceptual
How to Create Thumbnail Toolbars
Introduction to Pinned Sites

 

 

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.