Freigabe einbetten embed-share

Das Tool zum Freigeben von Einbettungen besteht aus einer Schaltfläche, die zum Bedienfeld Social-Media-Freigabe und zum modalen Dialogfeld hinzugefügt wird, das angezeigt wird, wenn das Tool aktiviert wird. Die Position der Schaltfläche wird vollständig vom Tool Social Share verwaltet.

Das Erscheinungsbild der Freigabeschaltfläche Einbetten wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embedshare

CSS-Eigenschaften des Einbettungs-Freigabe-Tools

Sie können die Schaltfläche aus dem Bedienfeld Social-Freigabe entfernen, indem Sie display:none CSS-Eigenschaft für die CSS-Klasse festlegen.

Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel : Einrichten einer Freigabeschaltfläche für die Einbettung mit 28 x 28 Pixel, wobei für jeden der vier verschiedenen Schaltflächenstatus ein anderes Bild angezeigt wird:

.s7videoviewer .s7embedshare {
 width:28px;
 height:28px;
}
.s7videoviewer .s7embedshare[state='up'] {
background-image:url(images/v2/EmbedShare_dark_up.png);
}
.s7videoviewer .s7embedshare[state='over'] {
background-image:url(images/v2/EmbedShare_dark_over.png);
}
.s7videoviewer .s7embedshare[state='down'] {
background-image:url(images/v2/EmbedShare_dark_down.png);
}
.s7videoviewer .s7embedshare[state='disabled'] {
background-image:url(images/v2/EmbedShare_dark_disabled.png);
}

Die Hintergrundüberlagerung, die die Web-Seite abdeckt, wenn das Dialogfeld aktiv ist, wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7backoverlay

CSS-Eigenschaften der Hintergrundüberlagerung

Beispiel: So richten Sie eine Hintergrundüberlagerung ein, die mit einer Deckkraft von 70 % grau dargestellt wird:

.s7videoviewer .s7embeddialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

Standardmäßig wird das modale Dialogfeld auf Desktop-Systemen zentriert auf dem Bildschirm angezeigt und nimmt auf Touch-Geräten den gesamten Web-Seitenbereich ein. In allen Fällen werden die Positionierung und Größe des Dialogfelds von der Komponente verwaltet. Das Dialogfeld wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7dialog

CSS-Eigenschaften des Dialogfelds

Beispiel: So richten Sie das Dialogfeld so ein, dass es das gesamte Browser-Fenster verwendet und auf Touch-Geräten einen weißen Hintergrund aufweist:

.s7videoviewer .s7touchinput .s7embeddialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

Die Dialogfeldkopfzeile besteht aus einem Symbol, einem Titeltext und einer Schließen-Schaltfläche. Der Header-Container wird gesteuert durch

.s7videoviewer .s7embeddialog .s7dialogheader

CSS-Eigenschaften der Dialogfeldkopfzeile

Das Symbol und der Titeltext werden in einen zusätzlichen Container eingeschlossen, der von gesteuert wird.

.s7videoviewer .s7embeddialog .s7dialogheader .s7dialogline

CSS-Eigenschaften der Dialogfeldzeile

Das Kopfzeilensymbol wird mit dem folgenden CSS-Klassenselektor gesteuert

.s7videoviewer .s7embeddialog .s7dialogheadericon

CSS-Eigenschaften des Dialogfeldkopfzeilensymbols

Der Header-Titel wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7dialogheadertext

CSS-Eigenschaften des Dialogfeldkopfzeilentextes

Die Schaltfläche „Schließen“ wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7closebutton

CSS-Eigenschaften des Schließen-Button-

Die QuickInfo für die Schaltfläche „Schließen“ und der Dialogfeldtitel können lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel : Zum Einrichten einer Dialogkopfzeile mit Abstand, 24 x 14 Pixel-Symbol, fetter 16-Punkt-Titel. Und schließlich eine Schaltfläche zum Schließen von 28 x 28 Pixeln, die zwei Pixel vom oberen und zwei Pixel vom rechten Rand des Dialogfeldcontainers positioniert ist:

.s7videoviewer .s7embeddialog .s7dialogheader {
 padding: 10px;
}
.s7videoviewer .s7embeddialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7videoviewer .s7embeddialog .s7dialogheadericon {
    background-image: url("images/sdk/dlgembed_cap.png");
    height: 14px;
    width: 24px;
}
.s7videoviewer .s7embeddialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7videoviewer .s7embeddialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7videoviewer .s7embeddialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7videoviewer .s7embeddialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7videoviewer .s7embeddialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7videoviewer .s7embeddialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

Die Fußzeile des Dialogfelds besteht aus der Schaltfläche „Abbrechen“. Der Fußzeilen-Container wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7dialogfooter

CSS-Eigenschaften des ​ für die Dialogfeldfußzeile

Die Fußzeile hat einen inneren Container, der die Schaltfläche behält. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7dialogbuttoncontainer

CSS-Eigenschaften des Schaltflächen-Containers für Dialogfelder

Die Schaltfläche „Alle auswählen“ wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7dialogactionbutton

Die Schaltfläche ist nur auf Desktop-Systemen verfügbar.

CSS-Eigenschaften der Schaltfläche „Alle auswählen“

Die Schaltfläche „Abbrechen“ wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7dialogcancelbutton

CSS-Eigenschaften des Dialogfelds Schaltfläche „Abbrechen“

Darüber hinaus verwenden beide Schaltflächen eine gemeinsame CSS-Klasse, die CSS-Einstellungen enthalten kann, die für andere Dialogfeldschaltflächen identisch sind:

.s7videoviewer .s7embeddialog .s7dialogfooter .s7button

CSS-Eigenschaften der Schaltfläche

Die QuickInfos für die Schaltfläche können lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel: So richten Sie eine Fußzeile für ein Dialogfeld mit einer Schaltfläche „Abbrechen“ (64 x 34) ein, wobei die Textfarbe und die Hintergrundfarbe für jeden Schaltflächenstatus unterschiedlich sind:

.s7videoviewer .s7embeddialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7videoviewer .s7embeddialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7videoviewer .s7embeddialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

Der Hauptdialogbereich zwischen Kopf- und Fußzeile enthält scrollbaren Dialogfeldinhalt und das Bildlauffeld auf der rechten Seite. In allen Fällen verwaltet die Komponente die Breite dieses Bereichs. Sie kann nicht in CSS festgelegt werden. Der Hauptdialogbereich wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7dialogviewarea

CSS-Eigenschaften des Anzeigebereichs- des Dialogfelds

Beispiel : Um einen Hauptdialogfeldbereich so einzurichten, dass er 300 Pixel hoch ist, weisen Sie einen zehn Pixel großen Rand auf und verwenden Sie einen weißen Hintergrund:

.s7videoviewer .s7embeddialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}

Alle Formularinhalte (wie Beschriftungen und Eingabefelder) befinden sich in einem Container, der von gesteuert wird.

.s7videoviewer .s7embeddialog .s7dialogbody

Wenn die Höhe dieses Containers größer als der Bereich des Hauptdialogfelds zu sein scheint, wird automatisch ein vertikaler Bildlauf durch die Komponente aktiviert.

CSS-Eigenschaften des Dialogfeldhauptteils

Beispiel: So richten Sie Formularinhalte mit zehn Pixel Abstand ein:

.s7videoviewer .s7embeddialog .s7dialogbody {
    padding: 10px;
}

Alle statischen Beschriftungen im Dialogfeldformular werden mit

.s7videoviewer .s7embeddialog .s7dialoglabel

Diese Klasse ist nicht zur Steuerung der Größe oder Position der Beschriftung geeignet, da Sie sie auf Texte an verschiedenen Stellen der Benutzeroberfläche des Formulars anwenden können.

CSS-Eigenschaften der Dialogfeldbezeichnung. ​

Die QuickInfos für Dialogfeldbeschriftungen können lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel: Um alle Beschriftungen als grau festzulegen, geben Sie eine Schriftart mit neun Pixeln fett an:

.s7videoviewer .s7embeddialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

Die Größe der Textkopie, die über dem Einbettungs-Code angezeigt wird, wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7dialoginputwide

CSS-Eigenschaften des Eingabefelds des Dialogfelds

Beispiel - Legen Sie für die Textkopie eine Breite von 430 Pixeln fest, während am unteren Rand ein Abstand von 10 Pixeln vorhanden ist:

.s7videoviewer .s7embeddialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

Der Einbettungs-Code wird in einen Container eingeschlossen und mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7dialoginputcontainer

CSS-Eigenschaften des Eingabecontainers für das Dialogfeld

Beispiel: Um einen grauen Rahmen von einem Pixel um den Einbettungs-Code-Text festzulegen, müssen Sie ihn 430 Pixel breit machen und einen Abstand von zehn Pixel aufweisen:

.s7videoviewer .s7embeddialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 10px;
    width: 430px;
}

Der tatsächliche Einbettungs-Code-Text wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7dialoginputcontainer

CSS-Eigenschaften des Eingabecontainers für das Dialogfeld

Beispiel - So richten Sie eingebetteten Code ein, sodass break-word Zeilenumbruch verwendet wird:

.s7videoviewer .s7embeddialog .s7dialogmessage {
    word-wrap: break-word;
}

Beschriftung und Dropdown-Liste für Einbettungsgröße befinden sich unten im Dialogfeld und werden in einen Container eingefügt, der mit dem folgenden CSS-Klassenselektor gesteuert wird:

.s7videoviewer .s7embeddialog .s7dialogembedsizepanel

CSS-Eigenschaften des Bedienfelds „Einbettungsgröße“ des Dialogfelds

Beispiel: So richten Sie ein Bedienfeld „Einbettungsgröße“ ein, das zehn Pixel Abstand aufweist:

.s7videoviewer .s7embeddialog .s7dialogembedsizepanel {
    padding: 10px;
}

Die Größe und Ausrichtung der Beschriftung für die Einbettungsgröße wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7dialogembedsizepanel

CSS-Eigenschaften des Bedienfelds „Einbettungsgröße“ des Dialogfelds

Beispiel - So legen Sie für die Beschriftung der Einbettungsgröße eine obere Ausrichtung und eine Breite von 80 Pixeln fest:

.s7videoviewer .s7embeddialog .s7dialogembedsizelabel {
    vertical-align: top;
    width: 80px;
}

Die Breite des Kombinationsfelds Einbettungsgröße wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7combobox

CSS-Eigenschaften des Kombinationsfelds

Beispiel : Damit wird das Kombinationsfeld „Einbettungsgröße“ so eingestellt, dass es bei der Anzeige eines vordefinierten Elements 300 Pixel und bei der Anzeige einer benutzerdefinierten Größe 110 Pixel breit ist:

.s7videoviewer .s7embeddialog .s7combobox[expanded="true"] {
    width: 300px;
}
.s7videoviewer .s7embeddialog .s7combobox[expanded="false"] {
    width: 110px;
}

Die Höhe des Kombinationsfeldtextes wird durch ein spezielles inneres Element definiert und mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7combobox .s7comboboxtext

CSS-Eigenschaften des Kombinationsfeld-Texts

Beispiel - Zum Festlegen der Einbettungsgröße für die Texthöhe des Kombinationsfelds auf 40 Pixel:

.s7videoviewer .s7embeddialog .s7combobox .s7comboboxtext {
    height: 40px;
}

Das Kombinationsfeld verfügt auf der rechten Seite über eine Schaltfläche „Dropdown“ und wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton

CSS-Eigenschaften der Kombinationsfeld-Schaltfläche

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

Beispiel: So legen Sie eine „Dropdown“-Schaltfläche auf 28 x 28 Pixel fest und haben für jeden Status ein separates Bild:

.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton {
 width:28px;
 height:28px;
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}

Das Bedienfeld mit der Liste der Einbettungsgrößen, die angezeigt wird, wenn das Kombinationsfeld geöffnet wird, wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7comboboxdropdown

Größe und Position des Bedienfelds werden von der Komponente gesteuert. Es ist nicht möglich, sie über CSS zu ändern.

CSS-Eigenschaften der Dropdown-Liste Kombinationsfeld

Beispiel: So legen Sie für das Kombinationsfeld einen grauen Rahmen von einem Pixel fest:

.s7videoviewer .s7embeddialog .s7comboboxdropdown {
    border: 1px solid #CCCCCC;
}

Ein einzelnes Element in einem Dropdown-Bedienfeld, das mit dem folgenden CSS-Klassenselektor gesteuert wird:

.s7videoviewer .s7embeddialog .s7dropdownitemanchor

CSS-Eigenschaften des Dropdown-Element-Ankers

Beispiel: So legen Sie für das Element im Kombinationsfeld einen weißen Hintergrund fest:

.s7videoviewer .s7embeddialog .s7dropdownitemanchor {
    background-color: #FFFFFF;
}

Ein Häkchen, das links neben dem ausgewählten Element im Kombinationsfeld angezeigt wird und mit der folgenden CSS-Klassenauswahl gesteuert wird:

.s7videoviewer .s7embeddialog .s7checkmark

CSS-Eigenschaften des Kontrollkästchens

Beispiel: So legen Sie das Häkchensymbol auf 25 x 25 Pixel fest:

.s7videoviewer .s7embeddialog .s7checkmark {
    background-image: url("images/sdk/cboxchecked.png");
    height: 25px;
    width: 25px;
}

Wenn die Option „Benutzerdefinierte Größe“ im Kombinationsfeld Einbettungsgröße ausgewählt ist, werden im Dialogfeld rechts zwei zusätzliche Eingabefelder angezeigt, damit der Benutzer eine benutzerdefinierte Einbettungsgröße eingeben kann. Diese Felder werden in einen Container eingeschlossen, der mit dem folgenden CSS-Klassenselektor gesteuert wird:

.s7videoviewer .s7embeddialog .s7dialogcustomsizepanel

CSS-Eigenschaften des Dialogfelds „Bedienfeld mit benutzerdefinierter Größe“

Beispiel : Zum Festlegen des Bedienfelds für benutzerdefinierte Eingabefelder auf 20 Pixel rechts neben dem Kombinationsfeld:

.s7videoviewer .s7embeddialog .s7dialogcustomsizepanel {
    left: 20px;
}

Jedes Eingabefeld mit benutzerdefinierter Größe ist in einen Container eingeschlossen, der einen Rahmen rendert und den Rand zwischen den Feldern festlegt. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7dialogcustomsize

CSS-Eigenschaften des Dialogfelds - Benutzerdefinierte Größe

Beispiel : So legen Sie für die Eingabefelder mit benutzerdefinierter Größe einen grauen Rahmen, einen Rand und einen Abstand von einem Pixel fest und sind 70 Pixel breit:

.s7videoviewer .s7embeddialog .s7dialogcustomsize {
    border: 1px solid #CCCCCC;
    margin-right: 20px;
    padding-left: 2px;
    padding-right: 2px;
    width: 70px;
}

Wenn ein vertikaler Bildlauf erforderlich ist, wird die Bildlaufleiste im Bereich nahe dem rechten Rand des Dialogfelds gerendert, der mit dem folgenden CSS-Klassenselektor gesteuert wird:

.s7videoviewer .s7embeddialog .s7dialogscrollpanel

CSS-Eigenschaften des Bildlaufbedienfelds des Dialogfelds

Beispiel: So richten Sie ein Bildlauffeld mit einer Breite von 44 Pixeln ein

.s7videoviewer .s7embeddialog .s7dialogscrollpanel {
    width: 44px;
}

Das Erscheinungsbild des Bildlaufleistenbereichs wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7embeddialog .s7scrollbar

CSS-Eigenschaften der Bildlaufleiste

Beispiel: So richten Sie eine Bildlaufleiste ein, die 28 Pixel breit ist und einen acht Pixel umfassenden Rand vom oberen, rechten und unteren Rand des Bildlaufbedienfelds aufweist:

.s7videoviewer .s7embeddialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

Die Bildlaufleistenspur ist der Bereich zwischen den oberen und unteren Bildlaufschaltflächen. Die Komponente legt automatisch die Position und Höhe der Spur fest. Die Spur wird mit dem folgenden CSS-Klassenselektor gesteuert

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolltrack

CSS-Eigenschaften des Bildlaufleisten-Tracks

Beispiel: So richten Sie eine Bildlaufleistenspur ein, die 28 Pixel breit ist und einen grauen Hintergrund hat:

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

Der Daumen der Bildlaufleiste bewegt sich vertikal innerhalb eines Bereichs der Bildlaufspur. Seine vertikale Position wird vollständig durch die Komponentenlogik gesteuert. Die Höhe der Daumen ändert sich jedoch nicht dynamisch je nach Inhaltsmenge. Die Höhe des Daumens und andere Aspekte können mit dem folgenden CSS-Klassenselektor konfiguriert werden:

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb

CSS-Eigenschaften des Thumbs der Bildlaufleiste

Beispiel: So richten Sie einen Thumb in der Bildlaufleiste ein, der 28 x 45 Pixel groß ist, oben und unten einen Rand von zehn Pixeln aufweist und für jeden Status unterschiedliche Grafiken aufweist:

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

Die Darstellung der oberen und unteren Bildlaufschaltflächen wird mit den folgenden CSS-Klassenselektoren gesteuert:

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

Scroll-Schaltflächen können nicht mit den CSS-Eigenschaften „oben“, „links“, „unten“ und „rechts“ positioniert werden. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.

CSS-Eigenschaften der oberen und unteren Bildlaufschaltflächen

Die QuickInfos für die Schaltfläche können lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel: So richten Sie Bildlaufschaltflächen ein, die eine Größe von 28 x 32 Pixeln haben und für jeden Status unterschiedliche Bildmotive aufweisen:

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}