Interaktive Muster

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

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:

  • 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

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

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.

Beispiel

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

background-color

Hintergrundfarbe des Farbfeldbereichs.

Beispiel

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

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.

Beispiel

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

width

Breite der Miniaturansicht.

height

Höhe der Miniaturansicht.

rand

Rand der Miniaturansicht.

HINWEIS

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.

Beispiel

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

color

Textfarbe.

rand

Beschriftungsrahmen

text-align

Horizontale Textausrichtung.

Schriftfamilie

Schriftname.

Beispiel

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

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 .

HINWEIS

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.

Beispiel

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; }

Auf dieser Seite