Das interaktive Bedienfeld "Muster"wird neben dem Videoinhalt angezeigt, wenn interaktive Daten in der Konfiguration an den Viewer übergeben wurden. Es besteht aus einem Banner oben, das Text wie "Click to View", eine Spalte mit mindestens einem interaktiven Farbfeld und zwei Bildlauftasten (nur auf Desktop-Systemen verfügbar) rendert.
Auf Desktop-Systemen und Touch-Geräten werden interaktive Muster im Querformat vertikal rechts neben dem Videoinhalt gerendert. Auf Touch-Geräten mit Hochformatausrichtung werden sie unten im Viewer als horizontale Zeile mit Farbfeldern angezeigt.
Der folgende CSS-Klassenselektor steuert die Position und Ausrichtung des interaktiven Bedienfelds "Muster":
.s7interactivevideoviewer .s7interactiveswatches
width |
Breite des interaktiven Farbfeldbedienfelds |
height |
Höhe des interaktiven Farbfeldbedienfelds. |
Anfang |
Position am oberen Rand des interaktiven Bedienfelds "Muster". |
unten |
Untere Position des interaktiven Bedienfelds "Muster". |
links |
Linke Position des interaktiven Bedienfelds "Muster". |
rechts |
Die rechte Position des interaktiven Bedienfelds "Muster". |
Die Laufzeitposition und -ausrichtung des interaktiven Bedienfelds wird durch eine Kombination der oben genannten CSS-Eigenschaften wie folgt definiert:
Es ist möglich, CSS-Markierungen mit diesem Stil zu verwenden, um eine adaptive Platzierung des interaktiven Bedienfelds "Muster"zu erreichen.
So richten Sie ein interaktives Bedienfeld für Muster ein, das am unteren Rand des Viewers auf Touch-Geräten horizontal im Querformat dargestellt wird. Und um ihn in allen anderen Fällen vertikal rechts neben dem Videoinhalt anzuzeigen:
.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7interactiveswatches,
.s7interactivevideoviewer.s7mouseinput .s7interactiveswatches {
width:120px;
height:auto;
right:0px;
top:0px;
left:auto;
bottom:auto;
}
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7interactiveswatches {
width:auto;
height:136px;
right:auto;
top:auto;
left:0px;
bottom:0px;
}
Größe und Position des Banners werden von der interaktiven Farbfeldkomponente verwaltet, die auf anderen Stilen basiert, die mit CSS angewendet werden, und können nicht explizit festgelegt werden.
Der folgende CSS-Klassenselektor steuert das Erscheinungsbild des Bannerbereichs:
.s7interactivevideoviewer .s7interactiveswatches .s7banner
background-color |
Hintergrundfarbe des Bannerbedienfelds. |
color |
Textfarbe im Bannerbereich. |
rand |
Rand um das Bannerbedienfeld herum. |
Schriftstärke |
Die Schriftstärke für den Text im Bannerbereich. |
Schriftgröße |
Die Schriftgröße, die für den Text im Bannerbereich verwendet werden soll. |
Schriftfamilie |
Die Schriftfamilie, die für den Text im Bannerbereich verwendet werden soll. |
font-align |
Die Schriftausrichtung für den Text im Bannerbereich. |
Die Banner-QuickInfo kann lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen.
Um ein Banner mit dunkelgrauem Hintergrund einzurichten, verwenden Sie einen helleren, zwei Pixel langen Rahmen und den horizontal zentrierten weißen Text:
.s7interactivevideoviewer .s7interactiveswatches .s7banner {
background-color: #222222;
border-bottom: 2px solid #444444;
color: #ffffff;
text-align: center;
}
Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Muster:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches
background-color |
Hintergrundfarbe des Farbfeldbereichs. |
So richten Sie einen Farbfeldbereich mit dunkelgrauem Hintergrund ein:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches {
background-color: #222222;
}
Der folgende CSS-Klassenselektor steuert den Abstand zwischen Musterminiaturansichten:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell
margin |
Die Größe des horizontalen und vertikalen Rands um jede Miniaturansicht. Der tatsächliche Miniaturansichtabstand entspricht der Summe des linken und rechten Rands, der für .s7thumbcell festgelegt wurde. |
So legen Sie einen vertikalen Abstand von zehn Pixel fest:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell {
margin: 5px;
}
Der folgende CSS-Klassenselektor steuert das Erscheinungsbild einzelner Miniaturansichten:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb
width |
Breite der Miniaturansicht. |
height |
Höhe der Miniaturansicht. |
rand |
Rand der Miniaturansicht. |
Miniaturansicht unterstützt die Attributauswahl state
, mit der Sie verschiedene Skins auf verschiedene Miniaturansichten anwenden können. Insbesondere state="selected"
entspricht der Miniaturansicht für das aktuell ausgewählte Bild; state="default"
entspricht dem Rest der Miniaturansichten; state="over"
wird beim Bewegen der Maus verwendet.
So richten Sie Miniaturansichten mit einer Größe von 100 x 75 Pixel ein:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb {
width:100px;
height:75px;
}
Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Miniaturansichtsbeschriftung:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label
color |
Textfarbe. |
rand |
Beschriftungsrahmen |
text-align |
Horizontale Textausrichtung. |
Schriftfamilie |
Schriftname. |
So richten Sie Beschriftungen für linksbündig, weiß, 12 Pixel in der Helvetica®-Schriftart und einen unteren Rand ein:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label {
border-bottom: 1px solid #e9e9e9;
text-align: left;
color: #ffffff;
font-family: Helvetica,sans-serif;
font-size: 12px;
}
Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Bildlaufschaltflächen nach oben und unten:
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton
.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton
Es ist nicht möglich, die Bildlauftasten mithilfe der CSS-Eigenschaften top
, left
, bottom
und right
zu positionieren. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.
width |
Breite der Bildlaufschaltfläche. |
height |
Höhe der Bildlaufschaltfläche. |
background-image |
Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird. |
background-position |
Die Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden. Siehe auch CSS-Sprites . |
Diese Schaltfläche unterstützt den Attributselektor state
, mit dem Sie verschiedene Skins auf die Schaltflächenzustände anwenden können: " up
", " down
", " over
"und " disabled
".
Die QuickInfos für Schaltflächen können lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen.
Um eine Bildlaufschaltfläche von 60 x 36 Pixel einzurichten, verwenden Sie für jeden Status ein anderes Bildmaterial und nehmen dieses Bildmaterial aus dem Sprite-Bild der Komponente:
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton {
background-size: 120px;
width: 60px;
height: 36px;
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state] {
background-image: url(images/v2/InteractiveSwatches_light_sprite.png);
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='up'] { background-position: -60px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='over'] { background-position: -0px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='down'] { background-position: -60px -648px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='disabled'] { background-position: -0px -648px; }