Share einbetten

Das Werkzeug "Freigabe einbetten"besteht aus einer Schaltfläche, die dem Social Sharing-Bedienfeld hinzugefügt wird, und dem modalen Dialogfeld, das angezeigt wird, wenn das Tool aktiviert wird. Die Position der Schaltfläche wird vollständig vom Social Sharing-Tool verwaltet.

Das Erscheinungsbild der Schaltfläche "Freigabe einbetten"wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7embedshare

CSS-Eigenschaften des Tools "Freigabe einbetten"

width	Schaltflächenbreite.
height	Schaltflächenhöhe.
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 .

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

Die QuickInfo für Schaltflächen kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: Zum Einrichten einer Freigabeschaltfläche für die Einbettung, die 28 x 28 Pixel groß ist und für jeden der vier Schaltflächenzustände ein anderes Bild anzeigt:

.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 sich auf der Webseite befindet, wenn das Dialogfeld aktiv ist, wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7embeddialog .s7backoverlay

CSS-Eigenschaften der Hintergrundüberlagerung

Deckkraft	Deckkraft der Hintergrundüberlagerung.
background-color	Hintergrundüberlagerungsfarbe.

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

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

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

.s7videoviewer .s7embeddialog .s7dialog

CSS-Eigenschaften des Dialogfelds

border-radius	Rahmenradius des Dialogfelds, falls das Dialogfeld nicht den gesamten Browser einnimmt.
background-color	Hintergrundfarbe des Dialogfelds.
width	Sollte entweder nicht eingestellt oder auf 100 % eingestellt sein. In diesem Fall nimmt das Dialogfeld das gesamte Browserfenster ein (dieser Modus wird auf Touch-Geräten bevorzugt).
height	Sollte entweder nicht eingestellt oder auf 100 % eingestellt sein. In diesem Fall nimmt das Dialogfeld das gesamte Browserfenster ein (dieser Modus wird auf Touch-Geräten bevorzugt).

Beispiel: Um das Dialogfeld so einzurichten, dass das gesamte Browserfenster mit einem weißen Hintergrund auf Touch-Geräten verwendet wird:

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

Die Kopfzeile des Dialogfelds besteht aus einem Symbol, einem Titeltext und einer Schaltfläche zum Schließen. Der Container der Kopfzeile wird mit

.s7videoviewer .s7embeddialog .s7dialogheader

CSS-Eigenschaften der Kopfzeile des Dialogfelds

Padding

Innenabstand für Kopfzeileninhalte.

Das Symbol und der Titeltext werden in einen zusätzlichen Container eingeschlossen, der mit

.s7videoviewer .s7embeddialog .s7dialogheader .s7dialogline

CSS-Eigenschaften der Dialogelinie

Padding

Innenabstand für das Kopfzeilensymbol und den Titel

Das Kopfzeilensymbol wird mit der folgenden CSS-Klassenauswahl gesteuert

.s7videoviewer .s7embeddialog .s7dialogheadericon

CSS-Eigenschaften des Dialogfeldkopfzeilensymbols

width	Symbolbreite
height	Symbolhöhe.
background-image	Symbolbild.
background-position	Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden. Siehe CSS-Sprites .

Der Kopfzeilentitel wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7embeddialog .s7dialogheadertext

CSS-Eigenschaften des Dialogfeldkopfzeilentextes

font-Gewichtung	Schriftart-Gewichtung.
font-size	Schrifthöhe.
font-family	Schriftfamilie.
Padding	Interne Textfüllung.

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

.s7videoviewer .s7embeddialog .s7closebutton

CSS-Eigenschaften der Schließen-Schaltfläche

Anfang	Vertikale Schaltflächenposition relativ zum Container der Kopfzeile.
rechts	Horizontale Schaltflächenposition relativ zum Container der Kopfzeile.
width	Schaltflächenbreite.
height	Schaltflächenhöhe.
Padding	Innenabstand der Schaltfläche.
background-image	Schaltflächenbild für jeden Status.
background-position	Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden. Siehe CSS-Sprites .

Die QuickInfo der Schaltfläche Schließen und der Titel des Dialogfelds können lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: Zum Einrichten einer Dialogkopfzeile mit Auffüllung, einem Symbol mit 24 x 14 Pixeln, einem fett gedruckten Titel mit 16 Punkten und einer Schließen-Schaltfläche mit 28 x 28 Pixeln, die zwei Pixel von oben und zwei Pixel von rechts vom Dialog-Container positioniert werden:

.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 Dialogfußzeile besteht aus der Schaltfläche "Abbrechen". Der Container der Fußzeile wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7embeddialog .s7dialogfooter

CSS-Eigenschaften der Fußzeile des Dialogfelds

rand	Rand, mit dem Sie die Fußzeile visuell vom Rest des Dialogfelds trennen können.

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

.s7videoviewer .s7embeddialog .s7dialogbuttoncontainer

CSS-Eigenschaften des Containers für die Schaltfläche "Dialogfeld"

Padding

Innere Umrandung zwischen der Fußzeile und der Schaltfläche.

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 "Alles auswählen"

width	Schaltflächenbreite.
height	Schaltflächenhöhe.
color	Schaltflächentextfarbe für jeden Status.
background-color	Hintergrundfarbe der Schaltflächen für jeden Status.

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

.s7videoviewer .s7embeddialog .s7dialogcancelbutton

CSS-Eigenschaften der Schaltfläche "Abbrechen"im Dialogfeld

width	Schaltflächenbreite.
height	Schaltflächenhöhe.
color	Schaltflächentextfarbe für jeden Status.
background-color	Hintergrundfarbe der Schaltflächen für jeden Status.

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

.s7videoviewer .s7embeddialog .s7dialogfooter .s7button

CSS-Eigenschaften der Schaltfläche

font-Gewichtung	Gewichtung der Schaltflächenschrift.
font-size	Schaltflächenschriftgröße
font-family	Schaltflächenschriftfamilie.
line-height	Texthöhe innerhalb der Schaltfläche. Betrifft die vertikale Ausrichtung.
box-shadow	Schlagschatten.
margin-right	Ränder der rechten Schaltfläche.

Die QuickInfos für Schaltflächen können lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: So richten Sie eine Fußzeile des Dialogfelds mit einer Schaltfläche "Abbrechen"im Format 64 x 34 ein, wobei die Textfarbe und die Hintergrundfarbe je nach 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 der Kopf- und Fußzeile) enthält durchlaufbare Dialogfeldinhalte und den Bildlaufbereich auf der rechten Seite. In allen Fällen verwaltet die Komponente die Breite dieses Bereichs, es ist nicht möglich, es in CSS festzulegen. Der Hauptdialogbereich wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7embeddialog .s7dialogviewarea

CSS-Eigenschaften des Dialogfelds für den Anzeigebereich

height	Die Höhe des Hauptdialogfeldbereichs. Sie sollte nur angegeben werden, wenn das Dialogfeld im Desktop-Modus funktioniert. Dies ist nicht möglich, wenn die Größe des Dialogfelds die Größe des gesamten Browserfensters einnimmt.
background-color	Die Hintergrundfarbe des Hauptdialogfeldbereichs.
margin	Äußerer Rand.

Beispiel: Um einen Hauptdialogfeldbereich auf eine Höhe von 300 Pixel festzulegen, haben Sie einen Ränder von 10 Pixeln und verwenden Sie einen weißen Hintergrund:

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

Der gesamte Formularinhalt (wie Beschriftungen und Eingabefelder) befindet sich in einem Container, der mit

.s7videoviewer .s7embeddialog .s7dialogbody

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

CSS-Eigenschaften des Dialogfeldtextes

Padding

Innenabstand.

Beispiel: So richten Sie Formularinhalte mit einer Auffüllung von zehn Pixeln ein:

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

Alle statischen Beschriftungen im Dialogfeld werden mit

.s7videoviewer .s7embeddialog .s7dialoglabel

Diese Klasse eignet sich nicht zur Steuerung der Beschriftungsgröße oder -position, da Sie sie an verschiedenen Stellen der Benutzeroberfläche des Formulars auf Texte anwenden können.

CSS-Eigenschaften der Beschriftung des Dialogfelds.

font-Gewichtung	Gewichtung der Beschriftungsschrift
font-size	Schriftgröße beschriften.
font-family	Schriftfamilie beschriften.
color	Beschriftungstextfarbe.

QuickInfos zu den Beschriftungen des Dialogfelds können lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: So richten Sie alle Beschriftungen so ein, dass sie grau und fett mit einer Schrift von neun Pixeln sind:

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

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

.s7videoviewer .s7embeddialog .s7dialoginputwide

CSS-Eigenschaften des Dialogfelds geben breites Feld ein

width	Breite des Eingabefelds.
Padding	Innenabstand.

Beispiel: Um die Textkopie auf eine Breite von 430 Pixeln festzulegen und unten eine Auffüllung von 10 Pixeln einzustellen,

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

Der Einbettungscode wird in Container eingeschlossen und mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7embeddialog .s7dialoginputcontainer

CSS-Eigenschaften des Containers für die Eingabe im Dialogfeld

width	Die Breite des Einbettungscode-Containers.
rand	Ränder um den Einbettungscode-Container.
Padding	Innenabstand.

Beispiel: Um einen grauen Rahmen von einem Pixel um den eingebetteten Code festzulegen, muss der Text 430 Pixel breit sein und eine zehnPixel lange Auffüllung aufweisen:

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

Der tatsächliche Einbettungscode-Text wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7embeddialog .s7dialoginputcontainer

CSS-Eigenschaften des Containers für die Eingabe im Dialogfeld

word-wrap

Umbruchstil.

Beispiel: So richten Sie Einbettungscode für die Verwendung von break-word Wortumbruch ein:

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

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

.s7videoviewer .s7embeddialog .s7dialogembedsizepanel

CSS-Eigenschaften des Bedienfelds "Einbettungsgröße"des Dialogfelds

Padding

Innenabstand.

Beispiel: So richten Sie ein Bedienfeld für die Einbettungsgröße ein, das zehn Pixel Abstand hat:

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

Die Größe und Ausrichtung der Beschriftung der Einbettgröße wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7embeddialog .s7dialogembedsizepanel

CSS-Eigenschaften des Bedienfelds "Einbettungsgröße"des Dialogfelds

vertical-align	Ausrichtung der vertikalen Beschriftung.
width	Beschriftungsbreite.

Beispiel: So legen Sie fest, dass die Beschriftung für die Einbettungsgröße oben ausgerichtet und 80 Pixel breit ist:

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

Die Breite des Kombinationsfelds für die Einbettgröße wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7embeddialog .s7combobox

CSS-Eigenschaften des Kombinationsfeldes

width

Breite des Kombinationsfeldes.

Beispiel: Das Kombinationsfeld für die Einbettungsgröße muss bei der Anzeige eines vordefinierten Elements 300 Pixel breit und bei der Anzeige einer benutzerdefinierten Größe 110 Pixel breit sein:

.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 der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7embeddialog .s7combobox .s7comboboxtext

CSS-Eigenschaften des Kombinationsfeldtexts

height

Texthöhe des Kombinationsfeldes

Beispiel: So legen Sie die Höhe des Kombinationsfeldeinsatzes auf 40 Pixel fest:

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

Das Kombinationsfeld verfügt über eine Dropdownschaltfläche auf der rechten Seite und wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton

CSS-Eigenschaften der Schaltfläche "Kombinationsfeld"

Anfang	Vertikale Schaltflächenposition im Kombinationsfeld.
rechts	Horizontale Schaltflächenposition innerhalb des Kombinationsfelds.
width	Schaltflächenbreite.
height	Schaltflächenhöhe.
background-image	Schaltflächenbild für jeden Status.
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.

Beispiel: Um eine Dropdown-Schaltfläche auf 28 x 28 Pixel festzulegen und für jeden Status ein separates Bild anzuzeigen:

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

Der Bereich mit der Liste der beim Öffnen des Kombinationsfeldes angezeigten Einbettungsgrößen wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7embeddialog .s7comboboxdropdown

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

CSS-Eigenschaften der Dropdownliste "Kombinationsfeld"

rand	Bereichsrand.

Beispiel: Das Kombinationsfeld muss einen grauen Rahmen von einem Pixel haben:

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

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

.s7videoviewer .s7embeddialog .s7dropdownitemanchor

CSS-Eigenschaften des Dropdownelement-Ankerpunkts

background-color

Elementhintergrund.

Beispiel: So legen Sie fest, dass das Kombinationsfeld einen weißen Hintergrund hat:

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

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

.s7videoviewer .s7embeddialog .s7checkmark

CSS-Eigenschaften des Kontrollkästchens

width	Symbolbreite
height	Symbolhöhe.
background-image	Objektbild.
background-position	Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden. Siehe CSS-Sprites .

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 im Kombinationsfeld "Einbettungsgröße"die Option "Benutzerdefinierte Größe"aktiviert ist, werden im Dialogfeld rechts zwei zusätzliche Eingabefelder angezeigt, damit der Benutzer eine benutzerdefinierte Einbettungsgröße eingeben kann. Diese Felder sind in einen Container eingeschlossen, der mit der folgenden CSS-Klassenauswahl gesteuert wird:

.s7videoviewer .s7embeddialog .s7dialogcustomsizepanel

CSS-Eigenschaften des benutzerdefinierten Bedienfelds für die Größe des Dialogfelds

links

Abstand zum Kombinationsfeld für die Einbettungsgröße.

Beispiel: Legen Sie für das Bedienfeld für Eingabefelder mit benutzerdefinierter Größe einen Wert von 20 Pixel rechts neben dem Kombinationsfeld fest:

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

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

.s7videoviewer .s7embeddialog .s7dialogcustomsize

CSS-Eigenschaften des Dialogfelds benutzerdefinierte Größe

rand	Ränder um das Eingabefeld.
width	Breite des Eingabefelds.
margin	Rand des Eingabefelds.
Padding	Auffüllung des Eingabefelds.

Beispiel: So legen Sie fest, dass Eingabefelder mit benutzerdefinierter Größe einen grauen Rahmen von einem Pixel, einen Rand und eine Auffüllung haben und eine Breite von 70 Pixel haben:

.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 Bedienfeld neben der rechten Kante des Dialogfelds gerendert, das mit der folgenden CSS-Klassenauswahl gesteuert wird:

.s7videoviewer .s7embeddialog .s7dialogscrollpanel

CSS-Eigenschaften des Bedienfelds für den Bildlauf im Dialogfeld

width

Breite des Bildlaufbedienfelds.

Beispiel: So richten Sie einen Bildlaufbereich auf eine Breite von 44 Pixel ein

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

Das Erscheinungsbild des Bereichs der Bildlaufleiste wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7embeddialog .s7scrollbar

CSS-Eigenschaften der Bildlaufleiste

width	Bildlaufleistenbreite
Anfang	Der Versatz der vertikalen Bildlaufleiste am oberen Rand des Bildlaufbedienfelds.
unten	Der Versatz der vertikalen Bildlaufleiste am unteren Rand des Bildlaufbedienfelds.
rechts	Der horizontale Versatz der Bildlaufleiste vom rechten Rand des Bildlaufbedienfelds.

Beispiel: Um eine Bildlaufleiste einzurichten, die 28 Pixel breit ist und einen 8 Pixel breiten Rand von oben, rechts und unten im Bildlaufbedienfeld hat:

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

Die Bildlaufleistenspur ist der Bereich zwischen den Schaltflächen für den oberen und unteren Bildlauf. Die Komponente legt automatisch die Position und Höhe der Leiste fest. Die Verfolgung wird mit dem folgenden CSS-Klassenselektor gesteuert

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolltrack

CSS-Eigenschaften der Bildlaufleistenspur

width	Spurbreite.
background-color	Hintergrundfarbe verfolgen.

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

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

Der Bildlaufleistenminiaturbereich bewegt sich vertikal innerhalb eines Bildlaufspurbereichs. Seine vertikale Position wird vollständig durch die Komponentenlogik gesteuert. Die Höhe des Thumbs ändert sich jedoch nicht dynamisch je nach Inhaltsmenge. Die Thumb-Höhe und andere Aspekte können mit der folgenden CSS-Klassenauswahl konfiguriert werden:

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb

CSS-Eigenschaften der Bildlaufleiste

width	Thumb-Breite.
height	Daumenhöhe.
padding-top	Die vertikale Umrandung zwischen der Oberkante der Leiste.
padding-bottom	Die vertikale Umrandung zwischen dem unteren Ende der Leiste.
background-image	Das für einen bestimmten Daumenstatus angezeigte Bild.

Beispiel: Zum Einrichten eines Bildlaufleistenminiaturbilds mit 28 x 45 Pixel, einem zehn Pixel breiten Rand am oberen und unteren Rand und unterschiedlicher Grafik für jeden Status:

.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"); 
}

Das Erscheinungsbild der Schaltflächen für den oberen und unteren Bildlauf wird mithilfe der folgenden CSS-Klassenselektoren gesteuert:

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton 

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

Es ist nicht möglich, Bildlaufschaltflächen mit den CSS-Eigenschaften top, left, bottom und right zu positionieren. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.

CSS-Eigenschaften der Schaltflächen für den oberen und unteren Bildlauf

width	Schaltflächenbreite.
height	Schaltflächenhöhe.
background-image	Das für einen Schaltflächenstatus angezeigte Bild.
background-position	Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden. Siehe CSS-Sprites .

Die QuickInfos für Schaltflächen können lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: So richten Sie Bildlaufschaltflächen ein, die 28 x 32 Pixel groß sind und für jeden Status ein anderes Bildmaterial haben:

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