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 . |
Diese Schaltfläche unterstützt die Attributauswahl state
, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.
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 . |
Diese Schaltfläche unterstützt die Attributauswahl state
, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.
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 "Alles auswählen"unterstützt die Attributauswahl state
, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.
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. |
Die Schaltfläche "Abbrechen"unterstützt die Attributauswahl state
, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.
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. |
Das Kombinationsfeld unterstützt die Attributauswahl expanded
mit möglichen Werten von true
und false
. true
wird verwendet, wenn das Kombinationsfeld eine der vordefinierten Einbettungsgrößen anzeigt. Daher sollte die gesamte verfügbare Breite verwendet werden. false
wird verwendet, wenn im Kombinationsfeld die Option "Benutzerdefinierte Größe"ausgewählt ist. Daher sollte sie verringert werden, um Platz für benutzerdefinierte Eingabe-Felder für Breite und Höhe zu schaffen.
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. |
Thumb unterstützt die Attributauswahl state
, die verwendet werden kann, um verschiedene Skins auf verschiedene Daumenzustände anzuwenden: up
, down
, over
und disabled
.
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 . |
Diese Schaltflächen unterstützen die Attributauswahl state
, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können: up
, down
, over
und disabled
.
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);
}