Das Inhaltsverzeichnis ist eine Schaltfläche in der Hauptsteuerleiste. Wenn diese Option aktiviert ist, wird ein Dropdown-Fenster mit einer Liste von Seitenindizes und -beschriftungen angezeigt.
Basierend auf der Konfiguration kann die Liste alle Seiten enthalten, die im Katalog vorhanden sind, oder nur die Seiten, für die explizite Beschriftungen definiert sind. Auf Desktop-Systemen wird rechts eine Bildlaufleiste angezeigt, wenn die Liste länger als die verfügbare Bildschirmgröße ist.
Die Position und Größe der Inhaltsverzeichnisschaltfläche in der Viewer-Benutzeroberfläche wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7ecatalogviewer .s7tableofcontents
CSS-Eigenschaften des Inhaltsverzeichnisses
margin-top |
Der Versatz am oberen Rand der Steuerleiste. |
margin-left |
Der 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. |
width |
Die Breite der Inhaltsverzeichnisschaltfläche. |
height |
Die Höhe der Inhaltsverzeichnisschaltfläche. |
background-image |
Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird. |
background-position |
Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden. Siehe auch CSS-Sprites . |
Diese Schaltfläche unterstützt state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf verschiedene Schaltflächenzustände anzuwenden.
Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.
Beispiel: Um eine Inhaltsverzeichnisschaltfläche einzurichten, die 4 Pixel vom unteren Rand und 43 Pixel vom linken Rand der Hauptsteuerungsleiste entfernt angeordnet ist. Die Größe beträgt 28 x 28 Pixel, und für jeden der vier Schaltflächenstatus wird ein anderes Bild angezeigt:
.s7ecatalogviewer .s7tableofcontents {
margin-top: 4px;
margin-left: 10px; width: 28px;
height: 28px;
}
.s7ecatalogviewer .s7tableofcontents[state='up'] {
background-image:url(images/v2/TableOfContents_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents[state='over'] {
background-image:url(images/v2/TableOfContents_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents[state='down'] {
background-image:url(images/v2/TableOfContents_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents[state='disabled'] {
background-image:url(images/v2/TableOfContents_dark_disabled.png);
}
Das Erscheinungsbild des Dropdown-Bedienfelds wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7ecatalogviewer .s7tableofcontents .s7panel
CSS-Eigenschaften des Dropdown-Bedienfelds
background-color |
Hintergrundfarbe des Dropdown-Bedienfelds. |
margin |
Interner Versatz zwischen den Bereichsgrenzen und dem Inhalt. |
box-Shadow |
Schlagschatten um das Bedienfeld herum. |
Die Größe oder Position des Dropdown-Bedienfelds kann nicht über CSS gesteuert werden. die Komponente ihr Layout programmgesteuert verwaltet.
Beispiel: Einrichten eines Dropdown-Bedienfelds mit einem halbtransparenten schwarzen Hintergrund, einer 5-Pixel-Ränder um den Inhalt und einem Schlagschatten:
.s7ecatalogviewer .s7tableofcontents .s7panel {
background-color: rgba(0, 0, 0, 0.5);
margin: 5px;
box-shadow: 2px 2px 3px #c0c0c0;
}
Das Erscheinungsbild des einzelnen Elements wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item
CSS-Eigenschaften des Elements
Schriftfamilie |
Schriftname. |
Schriftgröße |
Schriftgröße. |
height |
Höhe des Elements. |
Padding |
Interner Abstand. |
Das Dropdown-Listenelement unterstützt die state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf den Mauszeiger und die ausgewählten Elementstatus anzuwenden.
Beispiel: Richten Sie ein Dropdown-Element mit einer Helvetica® 14-Pixel-Schriftart und einer 19-Pixel-Höhe ein. Ein Element hat beim Bewegen des Mauszeigers einen dunkelgrauen Hintergrund und bei Auswahl einen hellgrauen Hintergrund:
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item {
font-family: Helvetica,sans-serif;
font-size: 14px;
height: 19px;
}
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item[state="over"] {
background-color: rgb(102, 102, 102);
}
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item[state="selected"] {
background-color: rgb(178, 178, 178);
}
Ein Element, das den Seitenindex anzeigt, wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7ecatalogviewer .s7tableofcontents .s7panel .s7index
CSS-Eigenschaften des Seitenindex
min-width |
Mindestelementbreite. |
max-width |
Maximale Elementbreite. |
padding-right |
Abstand zwischen dem Seitenindex und der Seitenbeschriftung. |
Es ist möglich, den Seitenindex vollständig auszublenden, indem Sie display:none
für s7index
CSS-Klasse.
Beispiel 1: Richten Sie einen Seitenindex mit einer Mindestbreite von 40 Pixel, einer maximalen Breite von 70 Pixel und einem Rand von 5 Pixel auf der rechten Seite ein:
.s7ecatalogviewer .s7tableofcontents .s7panel .s7index {
max-width: 70px;
min-width: 40px;
padding-right: 5px;
}
Beispiel 2 - Seiten-Index ausblenden:
.s7ecatalogviewer .s7tableofcontents .s7panel .s7index {
display: none;
}
Die Seitenbeschriftung wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7ecatalogviewer .s7tableofcontents .s7panel .s7label
CSS-Eigenschaften der Seitenbeschriftung
min-width |
Mindestelementbreite. |
max-width |
Maximale Elementbreite. |
Beispiel: Richten Sie einen Seitenindex mit einer Mindestbreite von 40 Pixel und einer maximalen Breite von 240 Pixel ein:
.s7ecatalogviewer .s7tableofcontents .s7panel .s7label {
min-width: 40px;
max-width: 240px;
}
Wenn im Dropdown-Bedienfeld mehr Elemente vorhanden sind, als vertikal angepasst werden können, und das System ein Desktop ist, rendert die Komponente eine vertikale Bildlaufleiste auf der rechten Seite des Bedienfelds. Das Erscheinungsbild des Bildlaufleistenbereichs wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7ecatalogviewer .s7tableofcontents .s7scrollbar
CSS-Eigenschaften der Bildlaufleiste
width |
Die Breite der Bildlaufleiste. |
Anfang |
Der Versatz der vertikalen Bildlaufleiste am oberen Rand des Bedienfeldbereichs. |
unten |
Der Versatz der vertikalen Bildlaufleiste am unteren Rand des Bedienfeldbereichs. |
rechts |
Der horizontale Versatz der Bildlaufleiste vom rechten Rand des Bedienfeldbereichs. |
Beispiel: Richten Sie eine Bildlaufleiste ein, die 28 Pixel breit ist und keinen Rand für den oberen, rechten oder unteren Bereich des Bedienfelds hat:
.s7ecatalogviewer .s7tableofcontents .s7scrollbar {
top:0px;
bottom:0px;
right:0px;
width:28px;
}
Die Bildlaufleisten-Spur ist der Bereich zwischen den oberen und unteren Bildlauftasten. Die Komponente legt automatisch die Position und Höhe der Spur fest. Die Verfolgung wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack
CSS-Eigenschaften der Bildlaufspur
width |
Die Spurbreite. |
background-color |
Die Hintergrundfarbe der Verfolgung. |
Beispiel: Richten Sie eine Bildlaufleiste ein, die 28 Pixel breit ist und einen halbtransparenten grauen Hintergrund hat:
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack {
width:28px;
background-color:rgba(102, 102, 102, 0.5);
}
Der Bildlaufleisten-Daumen bewegt sich innerhalb des Bildlaufverfolgungsbereichs vertikal. Seine vertikale Position wird durch die Komponentenlogik gesteuert. Die Thumb-Höhe ändert sich jedoch nicht dynamisch in Abhängigkeit von der Menge des Inhalts. Sie können die Daumenhöhe und andere Aspekte mit dem folgenden CSS-Klassenselektor konfigurieren:
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb
CSS-Eigenschaften der Bildlaufleiste
width |
Die Daumenbreite. |
height |
Die Daumenhöhe. |
Auffüllung |
Der vertikale Abstand zwischen dem oberen Ende des Gleises. |
padding-bottom |
Der vertikale Abstand zwischen dem unteren Ende des Gleises. |
background-image |
Das Bild, das für einen bestimmten Daumenstatus angezeigt wird. |
background-position |
Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden. Siehe auch CSS-Sprites . |
Thumb unterstützt die state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf die up
, down
, over
und disabled
Daumenzustände.
Beispiel: Richten Sie einen Bildlaufleisten-Daumen ein, der 28 x 45 Pixel groß ist, oben und unten 10 Pixel Ränder aufweist und für jeden Status unterschiedliche Grafiken aufweist:
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb {
width:28px;
background-repeat:no-repeat;
background-position:center;
height:45px;
padding-top:10px;
padding-bottom:10px;
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='up'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='down'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='over'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
Das Erscheinungsbild der oberen und unteren Bildlaufschaltflächen wird mithilfe der folgenden CSS-Klassenselektoren gesteuert:
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton
Es ist nicht möglich, die Bildlaufschaltflächen mithilfe von CSS zu positionieren top
, left
, bottom
und right
Eigenschaften; Stattdessen werden sie von der Viewer-Logik automatisch positioniert.
CSS-Eigenschaften der Schaltfläche "Nach oben scrollen und nach unten scrollen"
width |
Die Schaltflächenbreite. |
height |
Die Schaltflächenhöhe. |
background-image |
Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird. |
background-position |
Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden. Siehe auch CSS-Sprites . |
Schaltfläche unterstützt state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf die up
, down
, over
und disabled
Schaltflächenstatus.
Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.
Beispiel: Richten Sie Bildlaufschaltflächen ein, die 28 x 32 Pixel groß sind und für jeden Status unterschiedliche Grafiken aufweisen:
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}