Social Sharing

Das Social Sharing-Tool wird standardmäßig oben rechts angezeigt. Es besteht aus einer Schaltfläche und einem Bereich, der erweitert wird, wenn der Benutzer auf eine Schaltfläche klickt oder darauf tippt und einzelne Freigabewerkzeuge enthält.

Die Position und Größe des Social Sharing-Tools in der Benutzeroberfläche des Viewers wird wie folgt gesteuert:

.s7interactivevideoviewer .s7socialshare

CSS-Eigenschaften des Social Sharing-Tools

Anfang

Vertikale Position des Social Sharing-Tools im Verhältnis zum Viewer-Container.

links

Horizontale Position des Social Sharing-Werkzeugs relativ zum Viewer-Container.

width

Die Breite des Social Sharing-Tools.

height

Die Höhe des Social Sharing-Tools.

Beispiel

Um ein Social Sharing-Tool einzurichten, das vier Pixel von oben und fünf Pixel von rechts vom Viewer-Container positioniert und 28 x 28 Pixel groß ist.

.s7interactivevideoviewer .s7socialshare { 
 top:4px; 
 right:5px; 
 width:28px; 
 height:28px; 
}

Das Erscheinungsbild der Schaltfläche für das Social Sharing-Tool wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7interactivevideoviewer .s7socialshare .s7socialbutton

CSS-Eigenschaften der Schaltfläche "Social Sharing"

background-image

Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird.

background-position

Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt die Attributauswahl state, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.

Die QuickInfo für Schaltflächen kann lokalisiert werden. Siehe Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel

Um eine Schaltfläche für das Social Sharing-Tool einzurichten, mit der für jeden der vier Schaltflächenstatus ein anderes Bild angezeigt wird.

.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='up'] { 
background-image:url(images/v2/SocialShare_video_dark_up.png); 
} 
.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='over'] { 
background-image:url(images/v2/SocialShare_dark_over.png); 
} 
.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='down'] { 
background-image:url(images/v2/SocialShare_dark_down.png); 
} 
.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='disabled'] { 
background-image:url(images/v2/SocialShare_dark_disabled.png); 
}

Das Erscheinungsbild des Bedienfelds mit den einzelnen Social Sharing-Symbolen wird mithilfe der folgenden CSS-Klassenauswahl gesteuert:

.s7interactivevideoviewer .s7socialshare .s7socialsharepanel

CSS-Eigenschaften des Social Sharing-Bedienfelds

background-color

Die Hintergrundfarbe des Bedienfelds.

Beispiel

So richten Sie einen Bereich mit transparenter Farbe ein:

.s7interactivevideoviewer .s7socialshare .s7socialsharepanel { 
 background-color: transparent; 
}

Auf dieser Seite