DokumentationDynamic Media Viewer-Referenzhandbuch

Drucken

Letzte Aktualisierung: 19. Dezember 2024
  • Themen:

Erstellt für:

  • Entwickler
  • Benutzende

Das Druckwerkzeug besteht aus einer Schaltfläche, die der Steuerleiste und dem modalen Dialogfeld hinzugefügt wird, das angezeigt wird, wenn das Werkzeug aktiviert wird.

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

.s7ecatalogsearchviewer .s7print

CSS-Eigenschaften der Print-Schaltfläche

-Der Versatz vom oberen Rand der Steuerleiste.
Rand linksDer Abstand zur nächsten Schaltfläche auf der linken Seite oder zur linken Seite der Steuerleiste, wenn es sich um die erste Schaltfläche in einer Zeile handelt.
BreiteBreite der Schaltfläche.
HöheHö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 auch CSS Sprites-.

NOTE
Diese Schaltfläche unterstützt die state-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 Druckschaltfläche ein, die 28 x 28 Pixel groß ist und für jeden der vier verschiedenen Schaltflächenstatus ein anderes Bild anzeigt.

.s7ecatalogsearchviewer .s7print {
margin-top: 4px;
margin-left: 10px;
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7print[state='up'] {
background-image:url(images/v2/Print_dark_up.png);
}
.s7ecatalogsearchviewer .s7print[state='over'] {
background-image:url(images/v2/Print_dark_over.png);
}
.s7ecatalogsearchviewer .s7print[state='down'] {
background-image:url(images/v2/Print_dark_down.png);
}
.s7ecatalogsearchviewer .s7print[state='disabled'] {
background-image:url(images/v2/Print_dark_disabled.png);
}

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

.s7ecatalogsearchviewer .s7printdialog .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:

.s7ecatalogsearchviewer .s7printdialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

Standardmäßig wird das modale Dialogfeld auf Desktop-Systemen zentriert auf dem Bildschirm angezeigt. Die Positionierung und Größe des Dialogfelds wird von der -Komponente verwaltet. Das Dialogfeld wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7kprintdialog .s7dialog

CSS-Eigenschaften des Dialogfelds

-Rahmenradius des Dialogfelds.
-Hintergrundfarbe des Dialogfelds

Beispiel: So richten Sie ein Dialogfeld mit einem grauen Hintergrund ein:

.s7ecatalogsearchviewer .s7printdialog .s7dialog {
background-color: #dddddd;
}

Die Dialogfeldkopfzeile besteht aus einem Symbol, einem Titeltext und einer Schließen-Schaltfläche. Der Header-Container wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader

CSS-Eigenschaften der Dialogfeldkopfzeile

-Innerer Abstand für Kopfzeileninhalt.

Das Symbol und der Titeltext werden in einen zusätzlichen Container eingeschlossen, der wie folgt gesteuert wird:

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline

CSS-Eigenschaften der Dialogfeldzeile

-Innerer Abstand für Kopfzeilensymbol und Titel.

Das Kopfzeilensymbol wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon

CSS-Eigenschaften des Dialogfeldkopfzeilensymbols

BreiteSymbolbreite.
HöheSymbolhöhe.
Hintergrundbild-Symbolbild.
Hintergrundposition

Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden.

Siehe auch CSS Sprites-.

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

.s7ecatalogsearchviewer .s7printdialog .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:

.s7ecatalogsearchviewer .s7printdialog .s7closebutton

CSS-Eigenschaften des Schließen-Button-

Top-Vertikale Position der Schaltfläche relativ zum Kopfzeilencontainer.
rechteHorizontale Position der Schaltfläche relativ zum Kopfzeilencontainer.
BreiteBreite der Schaltfläche.
HöheHö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 auch CSS Sprites-.

NOTE
Diese Schaltfläche unterstützt die state-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 22 x 22 Pixel großen Symbol und einem fett gedruckten 16-Punkt-Titel. Schließlich wurde eine Schaltfläche zum Schließen mit 28 x 28 Pixeln zwei Pixel vom oberen und zwei Pixel vom rechten Rand des Dialogfeldcontainers positioniert:

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

Die Fußzeile des Dialogfelds besteht aus den Schaltflächen Abbrechen und An Drucken senden . Der Fußzeilen-Container wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter

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

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

Die Fußzeile verfügt über einen inneren Container, der beide Schaltflächen beibehält. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer

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

-Innerer Abstand zwischen Fußzeile und Schaltflächen.

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton

CSS-Eigenschaften des Dialogfelds Schaltfläche „Abbrechen“

BreiteBreite der Schaltfläche.
HöheHöhe der Schaltfläche.
-Textfarbe der Schaltfläche für jeden Status.
-Hintergrundfarbe der Schaltfläche für jeden Status.
NOTE
Diese Schaltfläche unterstützt die state-Attributauswahl, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.

Die Schaltfläche „An Drucken senden“ wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton

CSS-Eigenschaften der Aktionsschaltfläche des Dialogfelds

BreiteBreite der Schaltfläche.
HöheHöhe der Schaltfläche.
-Textfarbe der Schaltfläche für jeden Status.
-Hintergrundfarbe der Schaltfläche für jeden Status.
NOTE
Diese Schaltfläche unterstützt die state-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:

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button

CSS-Eigenschaften der Schaltfläche

-Schriftstärke der Schaltfläche.
-Schriftgröße der Schaltfläche.
-Schriftfamilie der Schaltfläche.
mit ZeilenhöheTexthöhe innerhalb der Schaltfläche. Beeinflusst die vertikale Ausrichtung.
-Schlagschatten.
Rand rechtsRechter Button-Rand.

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 der Schaltfläche Drucken (96 x 34) ein, wobei die Textfarbe und die Hintergrundfarbe für jeden Schaltflächenstatus unterschiedlich sind:

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

Der Hauptdialogbereich zwischen Kopf- und Fußzeile enthält Dialogfeldinhalte. 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:

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea

CSS-Eigenschaften des Anzeigebereichs- des Dialogfelds

HöheDie Höhe des Hauptdialogfeldbereichs.
-Die Hintergrundfarbe des Hauptdialogfeldbereichs.
-Außenrand.

Beispiel: So richten Sie einen Hauptdialogbereich ein mit einer automatisch berechneten Höhe, einem Rand von zehn Pixeln und einem weißen Hintergrund:

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:auto;
}

Der gesamte Formularinhalt (z. B. Beschriftungen und Eingabefelder) befindet sich in einem Container, der mit dem folgenden CSS-Klassenselektor gesteuert wird:

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody

CSS-Eigenschaften des Dialogfeldhauptteils

-Innerer Abstand.

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

.s7ecatalogsearchviewer .s7printdialog .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:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

CSS-Eigenschaften der Dialogfeldzeile

-Auffüllung der inneren Linie.

Beispiel: So richten Sie ein Dialogfeldformular ein, das für jede Zeile zehn Pixel Abstand aufweist:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline {
    padding: 10px;
}

Die Größe des Blocks mit Dialogfeldinhalten wird mit dem folgenden CSS-Klassenselektor gesteuert:

 .s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide

CSS-Eigenschaften der Eingabebreite des Dialogfelds

BreiteBlockbreite.
-Auffüllung der inneren Linie.

Beispiel: So legen Sie für einen Inhaltsblock eine Breite von 430 Pixeln und einen Abstand von 10 Pixeln am unteren Rand fest:

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

Alle statischen Beschriftungen im Dialogfeldformular werden mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel

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

CSS-Eigenschaften der Dialogfeldbezeichnung. ​

-Schriftstärke des Titels
-Schriftgröße des Titels.
-Schriftfamilie des Titels
-Textfarbe des Titels

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

Beispiel: So legen Sie fest, dass alle Beschriftungen grau, fett und mit einer Schriftart von neun Pixeln dargestellt werden:

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

Eingabesteuerelemente werden in den Container eingeschlossen und mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer

CSS-Eigenschaften des Eingabecontainers für das Dialogfeld

Abstand -Innerer Abstand.

Beispiel : Zum Festlegen eines Abstands von 30 Pixel vom linken Rand des Dialogfelds.

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer {
    padding-left: 30px;
}

Optionsschaltflächen und ihr Beschriftungstext werden mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption

CSS-Eigenschaften der Dialogfeldoption

BreiteDie Gesamtbreite der Optionsschaltfläche mit einer Beschriftung.
-Textfarbe der Beschriftung.

Der Abstand zwischen der Optionsschaltfläche und ihrer Beschriftung wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput

CSS-Eigenschaften der Dialogfeldoption Eingabe

Rand rechtsAbstand zwischen Optionsfeld und Beschriftung.

Numerische Auswahlen für die Druckbereichsauswahl werden mit dem folgenden CSS-Klassenselektor gesteuert

.s7ecatalogsearchviewer .s7printdialog .s7dialogrange

CSS-Eigenschaften des Druckbereichs des Dialogfelds

BreiteBreite der numerischen Auswahl.
-Abstand um die numerische Auswahl.

Beispiel: So legen Sie für alle Optionsschaltflächen eine Breite von 150 Pixeln mit schwarzem Text, einem Abstand von zehn Pixeln und einer numerischen Auswahl von 42 Pixeln fest:

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption {
    color: #000000;
    width: 150px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption input {
    margin-right: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogrange {
    margin-left: 10px;
    margin-right: 10px;
    width: 42px;
}

Die horizontale Unterteilung zwischen den Abschnitten Seitenbereichsauswahl und Drucklayout wird mit dem folgenden CSS-Klassenselektor gesteuert:

 .s7ecatalogsearchviewer
.s7printdialog .s7horizontaldivider

CSS-Eigenschaften der horizontalen Trennlinie

-Rahmen um Trennlinie.
-Innerer Abstand.
BreiteBreite des Trenners.
-Außenrand

Beispiel: So richten Sie eine Grauunterteilung mit einer Breite von 430 Pixel ein, mit einem vertikalen Abstand von 10 Pixel auf beiden Seiten und einem Rand von 10 Pixel oben:

.s7ecatalogsearchviewer .s7printdialog .s7horizontaldivider {
    border-top: 1px solid #aaaaaa;
    margin-top: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 430px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8