Dokumentation Dynamic Media Viewer-Referenzhandbuch

Drucken print

Last update: Tue Dec 31 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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 links

Der Abstand zur nächsten Schaltfläche auf der linken Seite oder zur linken Seite der Steuerleiste, wenn diese Schaltfläche die erste in einer Zeile ist.

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 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

Breite

Symbolbreite.

Höhe

Symbolhö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.

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 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. Und schließlich positionierte eine Schaltfläche zum Schließen mit 28 x 28 Pixeln zwei Pixel vom oberen und zwei Pixel vom rechten Rand des Dialogfeldcontainers:

.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“

Breite

Breite der Schaltfläche.

Höhe

Hö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

Breite

Breite der Schaltfläche.

Höhe

Hö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öhe

Texthöhe innerhalb der Schaltfläche. Beeinflusst die vertikale Ausrichtung.

Schlagschatten.

Rand rechts

Rechter 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 einer Schaltfläche „Abbrechen“ von 64 x 34 und einer Schaltfläche „An Drucken senden“ von 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öhe

Die 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

Breite

Blockbreite.

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

Breite

Die 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 rechts

Abstand 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

Breite

Breite 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.

Breite

Breite des Trenners.

Außenrand

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

.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