Die Hauptansicht besteht aus dem statischen Bild und dem gezoomten Bild, das in der Flyout-Ansicht angezeigt wird. Sie besteht außerdem aus dem markierten Navigationsbereich, der über dem statischen Bild angezeigt wird, und der Tipp-Meldung, die über dem statischen Bild angezeigt wird.
Wenn die Abmessungen des angezeigten Bildes nicht mit den Abmessungen der Flyout-Zoom-Ansicht übereinstimmen, wird der Bildinhalt im Anzeigebereich des Rechtecks der Flyout-Zoom-Ansicht zentriert.
CSS-Eigenschaften der Hauptansicht
Das Erscheinungsbild der Hauptansicht wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7flyoutviewer .s7flyoutzoomview
CSS-Eigenschaft |
Beschreibung |
---|---|
background-color |
Die Hintergrundfarbe der Hauptansicht. |
Beispiel - um die Hauptansicht transparent zu machen:
.s7flyoutviewer .s7flyoutzoomview {
background-color: transparent;
}
CSS-Eigenschaften der Flyout-Ansicht
Das Erscheinungsbild der Flyout-Ansicht wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom
CSS-Eigenschaft |
Beschreibung |
---|---|
links |
Die horizontale Position der Flyout-Ansicht in Bezug auf die obere linke Ecke der Hauptansicht. |
Anfang |
Die vertikale Position der Flyout-Ansicht relativ zur oberen linken Ecke der Hauptansicht. |
width |
Die Breite der Flyout-Ansicht. |
height |
Die Höhe der Flyout-Ansicht. |
rand |
Der Rahmen der Flyout-Ansicht. |
Beispiel: Um eine Flyout-Ansicht auf 600 x 400 Pixel einzurichten, die mit einem Offset von 100 Pixel rechts von der Hauptansicht von 512 x 288 angezeigt wird, wie im vorherigen Beispiel gezeigt:
.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom {
left: 612px;
top: 0px;
width: 600px;
height: 400px;
}
CSS-Eigenschaften der Hervorhebung in der Hauptansicht
Das Erscheinungsbild der Hervorhebung in der Hauptansicht wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7flyoutviewer .s7flyoutzoomview .s7highlight
Es ist möglich, Hintergrund, Rahmen, Transparenz und ähnliche Attribute mithilfe von CSS zu steuern. Die Größe und Position des Hervorhebungs-DOM-Elements wird jedoch von der Viewer-Logik verwaltet. Das Überschreiben über CSS wird nicht unterstützt.
CSS-Eigenschaft |
Beschreibung |
---|---|
background-color |
Die Farbe der Hervorhebung. |
Deckkraft |
Deckkraft hervorheben. Verwenden Sie für Internet Explorer 8 filter:alpha(opacity-...) ); |
rand |
Die Randhervorhebung. |
Beispiel: Einrichten einer grünen Hervorhebung mit 40 % Transparenz und einem roten Rahmen von einem Pixel:
.s7flyoutviewer .s7flyoutzoomview .s7highlight {
background-color: green;
opacity: 0.4;
filter: alpha(opacity = 40);
border: 1px solid red;
}
CSS-Eigenschaften des Cursors
Wann highlightmode
-Parameter auf cursor
, werden die Hervorhebungen in der Hauptansicht durch die feste Cursorgrafik ersetzt, die mit dem CSS-Klassenselektor gesteuert wird:
.s7flyoutviewer .s7flyoutzoomview
.s7cursor
Es ist möglich, das Hintergrundbild und die Größe mithilfe von CSS zu steuern.
Zu den anwendbaren CSS-Eigenschaften gehören:
CSS-Eigenschaft |
Beschreibung |
---|---|
background-image |
Cursorgrafik. |
width |
Cursorbreite. |
height |
Cursorhöhe. |
Cursor unterstützt input
-Attributauswahl, die verwendet werden kann, um verschiedene Cursorgrafiken und -größen für verschiedene Geräte anzuwenden. Insbesondere input="mouse"
entspricht den Desktop-Systemen und input="touch"
entspricht den Touch-Geräten.
CSS-Eigenschaften der Überlagerung
Wenn die overlay
-Parameter auf 1
, wird der Bereich um den Hervorhebungsrahmen oder das Cursorbild mit der CSS-Klassenauswahl gesteuert:
.s7flyoutviewer .s7flyoutzoomview
.s7overlay
CSS-Eigenschaft |
Beschreibung |
---|---|
background-color |
Überlagerungsfarbe. |
Deckkraft |
Überlagerungsdeckkraft. |
CSS-Eigenschaften der Tippmeldung
Das Erscheinungsbild der Tipp-Meldung wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7flyoutviewer .s7flyoutzoomview .s7tip
Es ist möglich, Schriftstil, Größe, Erscheinungsbild und vertikalen Versatz über CSS zu konfigurieren. Die horizontale Ausrichtung wird jedoch von der Viewer-Logik verwaltet. Überschreiben durch CSS mit left
oder right
-Eigenschaften werden nicht unterstützt.
CSS-Eigenschaft |
Beschreibung |
---|---|
unten |
Versatz unten in der Hauptansicht. |
color |
Textfarbe. |
Schriftfamilie |
Schriftname. |
Schriftgröße |
Schriftgröße. |
Padding |
Auffüllung um den Nachrichtentext. |
background-color |
Hintergrundfüllfarbe des Nachrichtentextes. |
border-radius |
Hintergrundrahmenradius des Nachrichtentextes |
Deckkraft |
Hintergrunddeckkraft des Nachrichtentextes. Verwenden Sie für Internet Explorer 8 filter:alpha(opacity-...) ) |
Die Tipp-Nachricht kann lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.
Beispiel: Zum Einrichten einer halbtransparenten Tipp-Meldung mit weißer Arial® 12-px-Schriftart, 50 Pixel Offset vom unteren Rand der Hauptansicht, Abstand und gerundeter Rahmen:
.s7flyoutviewer .s7flyoutzoomview .s7tip {
bottom: 50px;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 12px;
padding-right: 12px;
background-color: #000000;
border-radius: 4px;
opacity: 0.5;
filter: alpha(opacity = 50);
}