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. |
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 . |
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.
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. |
So richten Sie einen Bereich mit transparenter Farbe ein:
.s7interactivevideoviewer .s7socialshare .s7socialsharepanel {
background-color: transparent;
}