Interaktive Muster interactive-swatches
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
CSS-Eigenschaften der interaktiven Muster css-properties-of-the-interactive-swatches
Die Laufzeitposition und -ausrichtung des interaktiven Bedienfelds wird durch eine Kombination der oben genannten CSS-Eigenschaften wie folgt definiert:
- Um interaktive Muster horizontal am unteren Rand des Viewers zu rendern, legen Sie die Höhe auf einen absoluten Pixelwert fest. von links und von unten nach 0px; width, right und top to auto.
- Um interaktive Muster vertikal rechts neben dem Videoinhalt zu rendern, legen Sie die Breite auf ein absolutes Pixel fest. von rechts und von oben bis 0px; Höhe, links und unten bis Auto.
Es ist möglich, CSS-Markierungen mit diesem Stil zu verwenden, um eine adaptive Platzierung des interaktiven Bedienfelds "Muster"zu erreichen.
Beispiel example
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
CSS-Eigenschaften des Bannerbedienfelds css-properties-of-the-banner-panel
Die Banner-QuickInfo kann lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen.
Beispiel section-e8caea0a303c425a8a637c2a47c06355
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
CSS-Eigenschaften des Farbfeldbereichs css-properties-of-the-swatches-area
Beispiel section-9cadd62a09fd44a280f55ff42437e416
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
CSS-Eigenschaften des Farbfeldminiaturenabstands css-properties-of-the-swatches-thumbnail-spacing
Beispiel section-39fb270b7e494a9d99e6e8f6890ec53c
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
CSS-Eigenschaften des Erscheinungsbilds einzelner Miniaturansichten css-properties-of-the-appearance-of-individual-thumbnails
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.Beispiel section-69fec189ffaa440b97b6b846c320b75b
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
CSS-Eigenschaften des Erscheinungsbilds der Bezeichnung der Miniaturansicht css-properties-of-the-appearance-of-the-thumbnail-label
Beispiel section-eb141eb6c1154183baa69796edb90536
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.
CSS-Eigenschaften des Erscheinungsbilds der Bildlaufschaltflächen nach oben und unten css-properties-of-the-appearance-of-the-up-and-down-scroll-buttons
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.
Beispiel section-e6ce4fa084b84288bc7583342b2c510c
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; }