Shareeinbetten

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 .

HINWEIS

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 .

HINWEIS

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.

HINWEIS

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.

HINWEIS

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.

HINWEIS

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.

HINWEIS

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 .

HINWEIS

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

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now