Gesellschaftsanteil
Erstellt für:
- Entwickler
- Benutzende
Das Social-Sharing-Tool wird standardmäßig oben rechts angezeigt. Es besteht aus einer Schaltfläche und einem Bedienfeld, das sich erweitert, wenn Benutzende auf eine Schaltfläche klicken oder tippen, und individuelle Freigabetools enthält.
Position und Größe des Tools für die Freigabe in der Viewer-Benutzeroberfläche werden wie folgt gesteuert:
.s7videoviewer .s7socialshare
CSS-Eigenschaften des Social-Share-Tools
Top- | Vertikale Position des Tools zur gemeinsamen Nutzung in sozialen Netzwerken relativ zum Viewer-Container. |
linker | Horizontale Position des Tools zur gemeinsamen Nutzung in sozialen Netzwerken relativ zum Viewer-Container. |
Breite | Die Breite des Social-Sharing-Tools. |
Höhe | Die Höhe des Social-Sharing-Tools. |
Beispiel - Richten Sie ein Tool zur gemeinsamen Nutzung sozialer Daten ein, das vier Pixel vom oberen und fünf Pixel vom rechten Rand des Viewer-Containers entfernt platziert und eine Größe von 28 x 28 Pixel hat.
.s7videoviewer .s7socialshare {
top:4px;
right:5px;
width:28px;
height:28px;
}
Das Erscheinungsbild der Schaltfläche Social Share Tool wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7socialshare .s7socialbutton
CSS-Eigenschaften der sozialen Schaltfläche
Hintergrundbild- | Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird. |
Hintergrundposition |
Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden. Siehe von CSS-Sprites. |
state
-Attributauswahl, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.
Beispiel: Richten Sie eine Schaltfläche für ein Social-Sharing-Tool ein, die für jeden der vier verschiedenen Schaltflächenstatus ein anderes Bild anzeigt.
.s7videoviewer .s7socialshare .s7socialbutton[state='up'] {
background-image:url(images/v2/SocialShare_video_dark_up.png);
}
.s7videoviewer .s7socialshare .s7socialbutton[state='over'] {
background-image:url(images/v2/SocialShare_dark_over.png);
}
.s7videoviewer .s7socialshare .s7socialbutton[state='down'] {
background-image:url(images/v2/SocialShare_dark_down.png);
}
.s7videoviewer .s7socialshare .s7socialbutton[state='disabled'] {
background-image:url(images/v2/SocialShare_dark_disabled.png);
}
Das Erscheinungsbild des Bedienfelds, das die einzelnen Social-Sharing-Symbole enthält, wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7socialshare .s7socialsharepanel
CSS-Eigenschaften des Social-Share-Bedienfelds
Beispiel: Richten Sie ein Bedienfeld so ein, dass es eine transparente Farbe hat:
.s7videoviewer .s7socialshare .s7socialsharepanel {
background-color: transparent;
}