Inhaltsverzeichnis table-of-contents

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:

.s7ecatalogsearchviewer .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 diese Schaltfläche der erste in einer Zeile ist.
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.

NOTE
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 - Richten Sie eine Inhaltsverzeichnisschaltfläche ein, 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:

.s7ecatalogsearchviewer .s7tableofcontents {
margin-top: 4px;
margin-left: 10px; width: 28px;
 height: 28px;
}
.s7ecatalogsearchviewer .s7tableofcontents[state='up'] {
background-image:url(images/v2/TableOfContents_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='over'] {
background-image:url(images/v2/TableOfContents_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='down'] {
background-image:url(images/v2/TableOfContents_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='disabled'] {
background-image:url(images/v2/TableOfContents_dark_disabled.png);
}

Das Erscheinungsbild des Dropdown-Bedienfelds wird mit der folgenden CSS-Klassenauswahl gesteuert:

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

.s7ecatalogsearchviewer .s7tableofcontents .s7panel {
 background-color: rgba(0, 0, 0, 0.5);
 margin: 5px;
 box-shadow: 2px 2px 3px #c0c0c0;
}

Das Erscheinungsbild der einzelnen Elemente wird mit der folgenden CSS-Klassenauswahl gesteuert:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item

CSS-Eigenschaften des Elements

Schriftfamilie
Schriftname.
Schriftgröße
Schriftgröße.
height
Höhe des Elements.
Padding
Interner Abstand.
NOTE
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:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item {
font-family: Helvetica,sans-serif;
font-size: 14px;
height: 19px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="over"] {
background-color: rgb(102, 102, 102);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="selected"] {
background-color: rgb(178, 178, 178);
}

Ein Element, das den Seitenindex anzeigt, wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index

CSS-Eigenschaften des Seitenindex

min-width
Mindestelementbreite.
max-width
Maximale Elementbreite.
padding-right
Abstand zwischen dem Seitenindex und der Seitenbeschriftung.
NOTE
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:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index {
max-width: 70px;
min-width: 40px;
padding-right: 5px;
}

Beispiel 2 - Seiten-Index ausblenden:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index {
display: none;
}

Die Seitenbeschriftung wird mit dem folgenden CSS-Klassenselektor gesteuert:

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

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

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

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

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

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

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

NOTE
Thumb unterstützt die state -Attributauswahl, die verwendet werden kann, um verschiedene Skins auf die up, down, overund 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:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb {
 width:28px;
 background-repeat:no-repeat;
 background-position:center;
 height:45px;
 padding-top:10px;
 padding-bottom:10px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='up'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='down'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='over'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogsearchviewer .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:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton

Es ist nicht möglich, die Bildlaufschaltflächen mithilfe von CSS zu positionieren top, left, bottomund 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.

NOTE
Schaltfläche unterstützt state -Attributauswahl, die verwendet werden kann, um verschiedene Skins auf die up, down, overund 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:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8