Erstellen einer Miniaturansichts-Symbolleiste für eine angeheftete Site

In dieser Aufgabe wird erläutert, wie eine einfache Miniaturansichts-Symbolleiste für eine angeheftete Site erstellt und angezeigt wird.

Hinweis  Die Miniaturansichts-Symbolleiste ist in Internet Explorer 10 auf der neuen Windows-Benutzeroberfläche für angeheftete Websites nicht verfügbar.
 

In dieser Aufgabe verwendete Methoden

Folgende Methoden werden in diesem Thema eingeführt:

msSiteModeAddThumbBarButton(bstrIconURL, bstrTooltip)

Mithilfe der window.external.msSiteModeAddThumbBarButton-Methode fügen Sie eine 16 x 16 Pixel umfassende Schaltfläche zur Miniaturansichts-Symbolleiste hinzu.

msSiteModeShowThumbBar()

Mithilfe der window.external.msSiteModeShowThumbBar-Methode aktivieren Sie die Miniaturansichts-Symbolleiste.

Planen der Benutzeroberfläche für die Symbolleiste

Eine Miniaturansichts-Symbolleiste ist im Wesentlichen eine "Fernbedienung" für Ihre Website. Die Symbolleiste wird unter der Miniaturbildansicht angezeigt, wenn Sie den Mauszeiger über die Taskleistenschaltfläche einer angehefteten Site bewegen. Diese Funktion ist besonders für Websites hilfreich, die die Video- oder Audiowiedergabe implementieren, aber auch für zahlreiche andere Möglichkeiten. Zu Schaltflächen für Miniaturansichts-Symbolleisten gehören u. a.:

  • Wiedergabe/Anhalten
  • Zurück/Vor (überspringen)
  • Favorit (gefällt mir)
  • Teilen (Lesezeichen für soziales Netzwerk)
  • Suchen (weitere Informationen)
  • Status ändern (online/offline)
  • Jetzt kaufen
  • Bewerten

Da Sie selbst entscheiden, welche Befehle auf Ihrer Symbolleiste verfügbar sein werden, sollten Sie folgende Richtlinien beachten:

  • Nachdem die Symbolleiste angezeigt wird, können Sie keine Schaltflächen mehr hinzufügen. Sie können Schaltflächen jedoch temporär ausblenden oder deaktivieren, die nicht benötigt werden. Weitere Informationen finden Sie unter Deaktivieren und Ausblenden von Schaltflächen auf einer Miniaturansichts-Symbolleiste.
  • Eine Miniaturansichts-Symbolleiste kann maximal sieben Schaltflächen enthalten. Die Anzahl der anzeigbaren Schaltflächen wird durch die Größe des Vorschaufensters für die Miniaturansichten begrenzt. Das bedeutet konkret, dass einige Schaltflächen doppelte Aufgaben übernehmen müssen. Beispielsweise sind die Schaltflächen Anhalten und Stopp nicht beide erforderlich, da in beiden Fällen der Sound eingestellt wird. Sie können noch mehr Platz einsparen, indem Sie für Wiedergabe und Anhalten eine einzige Schaltfläche verwenden. Weitere Informationen zum Erhöhen des Platzes auf Miniaturansicht-Symbolleisten finden Sie unter Wechseln des Schaltflächenzustands auf einer Miniaturansichts-Symbolleiste.
  • Die Symbolleiste und ihre Schaltflächen werden für die Gültigkeitsdauer der Registerkarte erstellt. Selbst wenn Sie von der ursprünglichen Seite wegnavigieren, steht auf den nachfolgenden Seiten dieselbe Symbolleiste mit identischen Schaltflächen zur Verfügung. Sie sollten die Symbolleiste zunächst so erstellen, wie Sie sie benötigen, und sie dann für sämtliche Seiten Ihrer Website anpassen.

Erstellen von Symbolleistenschaltflächen

Das Erstellen einer Miniaturansichts-Symbolleiste umfasst zwei Schritte. Bevor Sie die Symbolleiste anzeigen können, müssen Sie zuerst die Schaltflächen mithilfe der msSiteModeAddThumbBarButton-Methode erstellen, wie im folgenden Codebeispiel veranschaulicht.


// 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');


Jeder Schaltfläche wird beim Erstellen eine ID zugeordnet. Stellen Sie sicher, dass Sie diesen Wert speichern, damit er später wieder abgerufen werden kann. Wenn auf eine Schaltfläche geklickt wird, können Sie die Schaltflächen über die Schaltflächen-ID unterscheiden. Wenn die Symbolleiste bereits früher während der Gültigkeitsdauer der Registerkarte erstellt wurde, werden dieselben Werte für die Schaltflächen-ID zurückgegeben, wenn Sie die Symbolleiste erneut erstellen. Denken Sie einfach daran, dieselbe Symbol-URL und denselben QuickInfo-Text wie beim erstmaligen Erstellen der Symbolleiste zu verwenden.

Hinweis  Das ursprüngliche Symbol und die ursprüngliche QuickInfo werden für msSiteModeShowButonStyle als Stil „Null“ betrachtet (0). Weitere Informationen finden Sie unter Wechseln des Schaltflächenzustands auf einer Miniaturansichts-Symbolleiste.
 

Abschließend zeigen Sie die Symbolleiste durch Aufrufen der msSiteModeShowThumbBar-Methode an.


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


Zusammenfassung

Die Beispielanwendung Channel9 Podcast Player stellt drei Schaltflächen für die Steuerung der Audiowiedergabe bereit, wie im folgenden Screenshot dargestellt.

Miniaturansichts-Symbolleiste mit den Schaltflächen "Zurück", "Wiedergabe" und "Weiter"

Das folgende Codebeispiel veranschaulicht, wie diese drei Schaltflächen erstellt werden.


// 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');


Nächste Schritte

Zu diesem Zeitpunkt verfügen Sie über eine sichtbare Miniaturansichts-Symbolleiste mit drei Schaltflächen, die jedoch noch nicht funktionieren, wenn Sie darauf klicken. In der nächsten Aufgabe, Reagieren auf Klicks auf die Miniaturansichts-Symbolleiste, erfahren Sie, wie ein Ereignishandler für die Symbolleiste geschrieben wird.

Weitere Beispiele

HuffingtonPost.com

Die Miniaturansichts-Symbolleiste von "HuffingtonPost.com" mit Schaltflächen für Facebook und Twitter.

"HuffingtonPost.com" verwendet eine Miniaturansichts-Symbolleiste mit Schaltflächen für Facebook und Twitter.

Wenn der Benutzer auf eine der Symbolleistenschaltflächen klickt, wird für das gewählte soziale Netzwerk ein Popupfenster geöffnet und der Benutzer kann daraufhin den aktuellen Artikel mit Freunden, Followern oder anderen Personen teilen.

DiscoveryChannel.com

Die Miniaturansichts-Symbolleiste von "DiscoveryChannel.com" mit Schaltflächen für Facebook, Twitter, Digg und Social Buzz

"DiscoveryChannel.com" verwendet eine Miniaturansichts-Symbolleiste mit Schaltflächen für Facebook, Twitter, Digg und Social Buzz.

Verwandte Themen

Aufgaben
Deaktivieren und Ausblenden von Schaltflächen auf einer Miniaturansichts-Symbolleiste
Reagieren auf Klicks auf die Miniaturansichts-Symbolleiste
Wechseln des Schaltflächenzustands auf einer Miniaturansichts-Symbolleiste
Konzepte
Erstellen von Miniaturansichts-Symbolleisten
Einführung in angeheftete Sites

 

 

Anzeigen: