E-Mail-Freigabe
Erstellt für:
- Entwickler
- Benutzende
Das Tool zur E-Mail-Freigabe besteht aus einer Schaltfläche, die zum Bedienfeld Social-Media-Freigabe und zum modalen Dialogfeld hinzugefügt wird und angezeigt wird, wenn das Tool aktiviert wird. Die Position der Schaltfläche wird vollständig vom Tool Social Share verwaltet.
Das Erscheinungsbild der Schaltfläche „E-Mail-Freigabe“ wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emailshare
CSS-Eigenschaften des E-Mail-Freigaben-Tools
| Breite | Breite der Schaltfläche. |
| Höhe | Höhe der Schaltfläche. |
| Hintergrundbild- | Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird. |
| Hintergrundposition |
Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden. Siehe von CSS-Sprites. |
Diese Schaltfläche unterstützt die state-Attributauswahl, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.
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 E-Mail-Freigabeschaltfläche mit 28 x 28 Pixel, über die für jeden der vier verschiedenen Schaltflächenstatus ein anderes Bild angezeigt wird.
.s7videoviewer .s7emailshare {
width:28px;
height:28px;
}
.s7videoviewer .s7emailshare[state='up'] {
background-image:url(images/v2/EmailShare_dark_up.png);
}
.s7videoviewer .s7emailshare[state='over'] {
background-image:url(images/v2/EmailShare_dark_over.png);
}
.s7videoviewer .s7emailshare[state='down'] {
background-image:url(images/v2/EmailShare_dark_down.png);
}
.s7videoviewer .s7emailshare[state='disabled'] {
background-image:url(images/v2/EmailShare_dark_disabled.png);
}
Die Hintergrundüberlagerung, die Web-Seiten abdeckt, wenn das Dialogfeld aktiv ist, wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7videoviewer .s7emaildialog .s7backoverlay
CSS-Eigenschaften der Backoverlay-
| - | Deckkraft der Hintergrundüberlagerung. |
| - | Hintergrundfarbe der Überlagerung. |
Beispiel: So richten Sie eine Hintergrundüberlagerung ein, die mit einer Deckkraft von 70 % grau dargestellt wird:
.s7videoviewer .s7emaildialog .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 .s7emaildialog .s7dialog
CSS-Eigenschaften des Dialogfelds
| - | Rahmenradius des Dialogfelds (wenn im Dialogfeld nicht das gesamte Browser-Fenster angezeigt wird) |
| - | Hintergrundfarbe des Dialogfelds |
| Breite | Sollte entweder deaktiviert oder auf 100 % gesetzt sein. In diesem Fall nimmt das Dialogfeld das gesamte Browser-Fenster ein (dieser Modus wird auf Touch-Geräten bevorzugt). |
| Höhe | Sollte entweder deaktiviert oder auf 100 % eingestellt sein. In diesem Fall nimmt das Dialogfeld das gesamte Browser-Fenster ein (dieser Modus wird auf Touch-Geräten bevorzugt). |
Beispiel: So richten Sie ein Dialogfeld ein, um das gesamte Browser-Fenster zu verwenden und auf Touch-Geräten einen weißen Hintergrund zu verwenden:
.s7videoviewer .s7touchinput .s7emaildialog .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 mit dem folgenden CSS-Klassenselektor gesteuert
.s7videoviewer .s7emaildialog .s7dialogheader
CSS-Eigenschaften der Dialogfeldkopfzeile
| - | Innerer Abstand für Kopfzeileninhalt. |
Das Symbol und der Titeltext werden in einen zusätzlichen Container eingeschlossen, der von gesteuert wird.
.s7videoviewer .s7emaildialog .s7dialogheader .s7dialogline
CSS-Eigenschaften der Dialogfeldzeile
| - | Innerer Abstand für das Kopfzeilensymbol und den Titel |
Das Kopfzeilensymbol wird mit dem folgenden CSS-Klassenselektor gesteuert
.s7videoviewer .s7emaildialog .s7dialogheadericon
CSS-Eigenschaften des Dialogfeldkopfzeilensymbols
| Breite | Symbolbreite. |
| Höhe | Symbolhöhe. |
| Hintergrundbild- | Symbolbild. |
| Hintergrundposition |
Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden. Siehe von CSS-Sprites. |
Der Header-Titel wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7dialogheadertext
CSS-Eigenschaften des Dialogfeldkopfzeilentextes
| - | Schriftstärke. |
| - | Schrifthöhe |
| - | Schriftfamilie. |
| - | Auffüllung für internen Text. |
Die Schaltfläche „Schließen“ wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7closebutton
CSS-Eigenschaften des Schließen-Button-
| Top- | Vertikale Position der Schaltfläche relativ zum Kopfzeilencontainer. |
| rechte | Horizontale Position der Schaltfläche relativ zum Kopfzeilencontainer. |
| Breite | Breite der Schaltfläche. |
| Höhe | Höhe der Schaltfläche. |
| - | Innerer Abstand der Schaltfläche. |
| Hintergrundbild- | Schaltflächenbild für jeden Status. |
| Hintergrundposition |
Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden. Siehe von CSS-Sprites. |
NOTEstate-Attributauswahl, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.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, einem 24 x 17-Pixel-Symbol, einem fett gedruckten 16-Punkt-Titel und einer 28 x 28-Pixel-Schaltfläche zum Schließen. Positionieren Sie ihn schließlich zwei Pixel oben und zwei Pixel rechts vom Dialogfeld-Container:
.s7videoviewer .s7emaildialog .s7dialogheader {
padding: 10px;
}
.s7videoviewer .s7emaildialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7videoviewer .s7emaildialog .s7dialogheadericon {
background-image: url("images/sdk/dlgemail_cap.png");
height: 17px;
width: 24px;
}
.s7videoviewer .s7emaildialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7videoviewer .s7emaildialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7videoviewer .s7emaildialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7videoviewer .s7emaildialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7videoviewer .s7emaildialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7videoviewer .s7emaildialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
Die Fußzeile besteht aus den Schaltflächen „Abbrechen“ und „E-Mail senden“. Der Fußzeilen-Container wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7dialogfooter
CSS-Eigenschaften des für die Dialogfeldfußzeile
Die Fußzeile hat einen inneren Container, der beide Schaltflächen behält. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7dialogbuttoncontainer
CSS-Eigenschaften des Schaltflächen-Containers für Dialogfelder
Die Schaltfläche „Abbrechen“ wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7dialogcancelbutton
CSS-Eigenschaften des Dialogfelds Schaltfläche „Abbrechen“
NOTEstate-Attributauswahl, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.Die Schaltfläche „E-Mail senden“ wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7dialogactionbutton
CSS-Eigenschaften der Aktionsschaltfläche des Dialogfelds
NOTEstate-Attributauswahl, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.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 .s7emaildialog .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 der Schaltfläche Abbrechen (64 x 34) und einer Schaltfläche E-Mail senden (82 x 34) ein, wobei die Textfarbe und die Hintergrundfarbe für jeden Schaltflächenstatus unterschiedlich sind:
.s7videoviewer .s7emaildialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7videoviewer .s7emaildialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7videoviewer .s7emaildialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7videoviewer .s7emaildialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7videoviewer .s7emaildialog .s7dialogactionbutton {
width:82px;
height:34px;
}
.s7videoviewer .s7emaildialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7videoviewer .s7emaildialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7videoviewer .s7emaildialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7videoviewer .s7emaildialog .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 .s7emaildialog .s7dialogviewarea
CSS-Eigenschaften des Anzeigebereichs- des Dialogfelds
NOTEstate-Attributauswahl. Sie wird auf sendsuccess gesetzt, wenn das E-Mail-Formular übermittelt wird und im Dialogfeld eine Bestätigungsmeldung angezeigt wird. Solange die Bestätigungsmeldung klein ist, kann diese Attributauswahl verwendet werden, um die Dialogfelthöhe zu reduzieren, wenn eine solche Bestätigungsmeldung angezeigt wird.Beispiel: Das Hauptdialogfeld sollte zunächst eine Höhe von 300 Pixeln und bei Anzeige der Bestätigungsmeldung eine Höhe von 100 Pixeln aufweisen. Es sollte ein Rand von 10 Pixeln vorhanden sein und ein weißer Hintergrund verwendet werden:
.s7videoviewer .s7emaildialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
.s7videoviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] {
height:100px;
}
Alle Formularinhalte (wie Beschriftungen und Eingabefelder) befinden sich in einem Container, der von gesteuert wird.
.s7videoviewer .s7emaildialog .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 .s7emaildialog .s7dialogbody {
padding: 10px;
}
Das Dialogfeldformular wird Zeile für Zeile ausgefüllt, wobei jede Zeile einen Teil des Formularinhalts enthält (z. B. eine Beschriftung und ein Texteingabefeld). Eine einzelne Formulareinstellung wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogline
CSS-Eigenschaften der Dialogfeldzeile
Beispiel: So richten Sie ein Dialogfeldformular ein, das für jede Zeile zehn Pixel Abstand aufweist:
.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogline {
padding: 10px;
}
Alle statischen Beschriftungen im Dialogfeldformular werden mit
.s7videoviewer .s7emaildialog .s7dialoglabel
Diese Klasse eignet sich nicht zur Steuerung der Größe oder Position von Beschriftungen, da Sie sie auf Texte an verschiedenen Stellen der Benutzeroberfläche des Formulars anwenden können.
CSS-Eigenschaften der Dialogfeldbezeichnung.
Die 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 .s7emaildialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
Alle statischen Beschriftungen, die links neben den Formulareingabefeldern angezeigt werden, werden mit Folgendem gesteuert:
.s7videoviewer .s7emaildialog .s7dialoginputlabel
CSS-Eigenschaften der Eingabelabel des Dialogfelds
Beispiel: Um Eingabefeldbeschriftungen so einzurichten, dass sie 50 Pixel breit, rechtsbündig, zehn Pixel Abstand und einen zehn Pixel-Rand rechts sind:
.s7videoviewer .s7emaildialog .s7dialoginputlabel {
margin-right: 10px;
padding: 10px;
text-align: right;
width: 50px;
}
Jedes Formulareingabefeld ist in den -Container eingeschlossen, sodass Sie einen benutzerdefinierten Rahmen um das Eingabefeld anwenden können. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7dialoginputcontainer
CSS-Eigenschaften des Eingabecontainers für das Dialogfeld
NOTEstate. Sie wird auf verifyerror gesetzt, wenn Benutzende einen Fehler im Eingabedatenformat machen und die Inline-Validierung fehlschlägt. Mit diesem Attributselektor können Sie falsche Benutzereingaben im Formular markieren.Die meisten Eingabefelder, die sich von der Beschriftung auf der linken Seite bis zum rechten Rand des Dialogfeldkörpers erstrecken (einschließlich der Felder „Von“ und „Nachricht„), werden gesteuert durch:
.s7videoviewer .s7emaildialog .s7dialoginputwide
CSS-Eigenschaften des Eingabefelds des Dialogfelds
Das Eingabefeld „An“ ist schmaler, da es rechts Platz für die Schaltfläche „E-Mail entfernen“ bereitstellt. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7dialoginputshort
CSS-Eigenschaften des kurzen Eingabefelds des Dialogfelds
Beispiel: So richten Sie ein Formular ein, das einen grauen Rahmen mit einem Pixel und neun Pixel Abstand um alle Eingabefelder hat. So weisen Sie für Felder, bei denen die Validierung nicht erfolgreich ist, denselben Rahmen in roter Farbe auf, sodass das Eingabefeld 250 Pixel breit und der Rest der Eingabefelder 300 Pixel breit ist:
.s7videoviewer .s7emaildialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 9px;
}
.s7videoviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] {
border: 1px solid #FF0000;
}
.s7videoviewer .s7emaildialog .s7dialoginputshort {
width: 250px;
}
.s7videoviewer .s7emaildialog .s7dialoginputwide {
width: 300px;
}
Das Eingabefeld für E-Mail-Nachrichten wird ebenfalls wie folgt gesteuert:
.s7videoviewer .s7emaildialog .s7dialogmessage
Mit dieser Klasse können Sie bestimmte Eigenschaften für das zugrunde liegende TEXTAREA festlegen.
CSS-Eigenschaften der Dialogfeldmeldung
Beispiel: So legen Sie eine E-Mail-Nachricht mit einer Höhe von 50 Pixel und break-word Zeilenumbruch fest:
.s7videoviewer .s7emaildialog .s7dialogmessage {
height: 50px;
word-wrap: break-word;
}
Mit der Schaltfläche „Weitere E-Mail-Adresse hinzufügen“ kann ein Benutzer mehrere Adressen in ein E-Mail-Formular einfügen. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton
CSS-Eigenschaften des Dialogfelds Schaltfläche E-Mail-Adresse hinzufügen
NOTEstate-Attributauswahl, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.
Beispiel: Um die Schaltfläche „Weitere E-Mail-Adresse hinzufügen“ so einzurichten, dass sie 25 Pixel hoch ist, verwenden Sie eine 12-Punkt-Fettschrift mit rechter Ausrichtung und einer anderen Textfarbe und einem anderen Bild für jeden Status:
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton {
text-align:right;
font-size:12pt;
font-weight:bold;
background-position:left center;
line-height:25px;
padding-left:30px;
height:25px;
}
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] {
color:#666666;
background-image:url(images/sdk/dlgaddplus_up.png);
}
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] {
color:#000000;
background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] {
color:#000000;
text-decoration:underline;
background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] {
color:#666666;
background-image:url(images/sdk/dlgaddplus_up.png);
}
Mit der Schaltfläche „Entfernen“ kann ein Benutzer zusätzliche Adressen aus dem E-Mail-Formular entfernen. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton
CSS-Eigenschaften des Dialogfelds - Schaltfläche zum Entfernen der E-Mail
Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden.
Siehe von CSS-Sprites.
NOTEstate-Attributauswahl, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.
Beispiel: So richten Sie eine „Entfernen“-Schaltfläche auf 25 x 25 Pixel ein und verwenden für jeden Status ein anderes Bild:
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton {
width:25px;
height:25px;
}
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] {
background-image:url(images/sdk/dlgremove_up.png);
}
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] {
background-image:url(images/sdk/dlgremove_over.png);
}
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] {
background-image:url(images/sdk/dlgremove_over.png);
}
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] {
background-image:url(images/sdk/dlgremove_up.png);
}
Der freigegebene Inhalt wird unten im Dialogfeld angezeigt und enthält eine Miniaturansicht, einen Titel, eine Ursprungs-URL und eine Beschreibung. Sie wird in einen Container verpackt, der von Folgendem gesteuert wird:
.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogcontent
CSS-Eigenschaften des
Beispiel: So richten Sie einen unteren Container ein, der einen gepunkteten Rahmen mit einem Pixel und keinen Abstand aufweist:
.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogcontent {
border: 1px dotted #A0A0A0;
padding: 0;
}
Das Miniaturbild wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7dialogthumbnail
Die background-image-Eigenschaft wird durch die Komponentenlogik festgelegt.
CSS-Eigenschaften des Miniaturbilds des Dialogfelds
Beispiel: So legen Sie fest, dass die Miniaturansicht 90 x 60 Pixel groß und mit zehn Pixel Abstand oben ausgerichtet ist:
.s7videoviewer .s7emaildialog .s7dialogthumbnail {
height: 60px;
padding: 10px;
vertical-align: top;
width: 90px;
}
Inhaltstitel, Herkunft und Beschreibung werden außerdem in einem Bedienfeld rechts neben der Inhaltsminiatur gruppiert. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7dialoginfopanel
CSS-Eigenschaften des Informationsbereichs des Dialogfelds
Beispiel: So richten Sie ein Bedienfeld mit Inhaltsinformationen ein, das 300 Pixel breit ist:
.s7videoviewer .s7emaildialog .s7dialoginfopanel {
width: 300px;
}
Der Inhaltstitel wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7dialogtitle
CSS-Eigenschaften des Dialogfeldtitels
Beispiel: So richten Sie einen Inhaltstitel so ein, dass er eine fette Schriftart mit einem Rand von zehn Pixeln verwendet:
.s7videoviewer .s7emaildialog .s7dialogtitle {
font-weight: bold;
margin: 10px;
}
Der Inhaltsursprung wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7dialogorigin
CSS-Eigenschaften des Inhaltsursprungs Dialogfelds
Beispiel - Zum Einrichten des Inhaltsursprungs mit einem Rand von zehn Pixeln:
.s7videoviewer .s7emaildialog .s7dialogorigin {
margin: 10px;
}
Die Inhaltsbeschreibung wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7dialogdescription
CSS-Eigenschaften des Dialogfelds Inhaltsbeschreibung
Beispiel : Einrichten einer Inhaltsbeschreibung mit einem Rand von zehn Pixeln und Verwendung einer Schriftart mit neun Punkten:
.s7videoviewer .s7emaildialog .s7dialogdescription {
font-size: 9pt;
margin: 10px;
}
Wenn Benutzende falsche Eingabedaten eingeben und die Inline-Validierung fehlschlägt oder wenn das Dialogfeld beim Senden des Formulars einen Fehler oder eine Bestätigungsmeldung rendern muss, wird oben im Dialogfeldtext eine Meldung angezeigt. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7dialogerrormessage
CSS-Eigenschaften der Fehlermeldung im Dialogfeld
NOTEstate mit den folgenden möglichen Werten: verifyerror, senderror und sendsuccess. Der Attributselektor verifyerror wird festgelegt, wenn eine Nachricht aufgrund eines Fehlers bei der Validierung der Inline-Eingabe angezeigt wird. senderror wird festgelegt, wenn ein Backend-E-Mail-Service einen Fehler meldet. sendsuccess wird festgelegt, wenn die E-Mail erfolgreich gesendet wird. Auf diese Weise ist es möglich, die Nachricht je nach Dialogfeldstatus unterschiedlich zu gestalten.Die Fehlermeldung kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.
Beispiel - So richten Sie eine Nachricht so ein, dass sie eine 10-Punkt-Fettschrift verwendet. Außerdem muss sie eine Zeilenhöhe von 25 Pixeln, einen Abstand von 20 Pixeln auf der linken Seite, ein Ausrufezeichen-Symbol, roten Text bei einem Fehler und kein Symbol und grünen Text bei Erfolg aufweisen:
.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] {
background-image: url("images/sdk/dlgerrimg.png");
color: #FF0000;
}
.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] {
background-image: url("images/sdk/dlgerrimg.png");
color: #FF0000;
}
.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] {
background-image: none;
color: #00B200;
}
.s7videoviewer .s7emaildialog .s7dialogerrormessage {
background-position: left center;
font-size: 10pt;
font-weight: bold;
line-height: 25px;
padding-left: 20px;
}
Wenn ein vertikaler Bildlauf erforderlich ist, wird die Bildlaufleiste im Bedienfeld nahe dem rechten Rand des Dialogfelds gerendert, das mit dem folgenden CSS-Klassenselektor gesteuert wird:
.s7videoviewer .s7emaildialog .s7dialogscrollpanel
CSS-Eigenschaften des Bildlaufbedienfelds des Dialogfelds
Beispiel: So richten Sie ein Bildlauffeld mit einer Breite von 44 Pixeln ein:
.s7videoviewer .s7emaildialog .s7dialogscrollpanel {
width: 44px;
}
Das Erscheinungsbild des Bildlaufleistenbereichs wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7videoviewer .s7emaildialog .s7scrollbar
CSS-Eigenschaften der Bildlaufleiste
Beispiel: So richten Sie eine Bildlaufleiste ein, die 28 Pixel breit ist, und zwar einen Rand von acht Pixeln oben, rechts und unten im Bildlaufbedienfeld:
.s7videoviewer .s7emaildialog .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 .s7emaildialog .s7scrollbar .s7scrolltrack
CSS-Eigenschaften der Scroll-Spur
Beispiel: So richten Sie eine Bildlaufleistenspur ein, die 28 Pixel breit ist und einen grauen Hintergrund hat:
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}
Der Daumen der Bildlaufleiste bewegt sich vertikal innerhalb eines Bereichs der Bildlaufspur. Die vertikale Position wird vollständig von der Komponentenlogik gesteuert, jedoch ändert sich die Daumenhöhe je nach Inhaltsmenge nicht dynamisch. Sie können die Höhe der Miniaturen und andere Aspekte mit dem folgenden CSS-Klassenselektor konfigurieren:
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb
CSS-Eigenschaften des Thumbs der Bildlaufleiste
Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden.
Siehe von CSS-Sprites.
NOTEstate-Attributselektor , mit dem verschiedene Skins auf verschiedene Daumenzustände angewendet werden können: up, down, over und disabled.Die QuickInfos für die Schaltfläche können lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.
Beispiel - Zum Einrichten eines Thumbs für eine Bildlaufleiste mit 28 x 45 Pixel, einem Rand von zehn Pixeln oben und unten und unterschiedlichen Grafiken für jeden Status:
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb {
height: 45px;
padding-bottom: 10px;
padding-top: 10px;
width: 28px;
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] {
background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] {
background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] {
background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7videoviewer .s7emaildialog .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 .s7emaildialog .s7scrollbar .s7scrollupbutton
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton
CSS-Eigenschaften der oberen und unteren Bildlaufschaltflächen
Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden.
Siehe von CSS-Sprites.
NOTEstate-Attributauswahl, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können: up, down, over und disabled.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 .s7emaildialog .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/sdk/scroll_up_over.png);
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/sdk/scroll_up_down.png);
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/sdk/scroll_down_up.png);
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/sdk/scroll_down_over.png);
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/sdk/scroll_down_down.png);
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/sdk/scroll_down_disabled.png);
}