Inhaltsverzeichnis table-of-contents
Das Inhaltsverzeichnis ist eine Schaltfläche in der Hauptsteuerleiste. Wenn aktiviert, wird ein Dropdown-Bedienfeld 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 Kennzeichnungen definiert sind. Auf Desktop-Systemen wird rechts eine Bildlaufleiste angezeigt, wenn die Liste länger ist als die verfügbare Bildschirmgröße.
Die Position und Größe der Inhaltsverzeichnisschaltfläche in der Viewer-Benutzeroberfläche werden mit dem folgenden CSS-Klassenselektor gesteuert:
.s7ecatalogsearchviewer .s7tableofcontents
CSS-Eigenschaften des Inhaltsverzeichnisses
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 : Richten Sie eine Schaltfläche für das Inhaltsverzeichnis ein, die sich 4 Pixel vom unteren Rand und 43 Pixel vom linken Rand der Hauptsteuerleiste entfernt befindet. Die Größe beträgt 28 x 28 Pixel und für jeden der vier verschiedenen 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 dem folgenden CSS-Klassenselektor gesteuert:
.s7ecatalogsearchviewer .s7tableofcontents .s7panel
CSS-Eigenschaften des Dropdown-Bedienfelds
Beispiel: Ein Dropdown-Bedienfeld mit einem halbtransparenten schwarzen Hintergrund, einem 5-Pixel-Rand um den Inhalt und einem Schlagschatten wird eingerichtet:
.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 dem folgenden CSS-Klassenselektor gesteuert:
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item
CSS-Eigenschaften des Elements
state-Attributselektor , der verwendet werden kann, um verschiedene Skins auf den Mauszeiger und ausgewählte Elementzustände anzuwenden.Beispiel: Ein Dropdown-Element mit einer Helvetica®-Schriftart von 14 Pixel und einer Höhe von 19 Pixel einrichten. 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 dem folgenden CSS-Klassenselektor gesteuert:
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index
CSS-Eigenschaften des Seitenindex
display:none für die s7index CSS-Klasse festlegen.Beispiel 1: Einrichten eines Seitenindexes mit einer Mindestbreite von 40 Pixel, einer maximalen Breite von 70 Pixel und einem 5-Pixel-Rand auf der rechten Seite:
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index {
max-width: 70px;
min-width: 40px;
padding-right: 5px;
}
Beispiel 2: Ausblenden des Seitenindex:
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index {
display: none;
}
Die Seitenbeschriftung wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label
CSS-Eigenschaften der Seitenbeschriftung
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 mehr Elemente vorhanden sind, als vertikal in das Dropdown-Bedienfeld passen 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 dem folgenden CSS-Klassenselektor gesteuert:
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar
CSS-Eigenschaften der Bildlaufleiste
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 Bildlaufleistenspur ist der Bereich zwischen den oberen und unteren Bildlaufschaltflächen. Die Komponente legt automatisch die Position und Höhe der Spur fest. Die Spur wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolltrack
CSS-Eigenschaften der Scroll-Spur
Beispiel: Richten Sie eine Bildlaufleistenspur 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 Daumen der Bildlaufleiste bewegt sich vertikal innerhalb des Bereichs der Bildlaufspur. Seine vertikale Position wird durch die Komponentenlogik gesteuert. Die Höhe der Daumen ändert sich jedoch nicht dynamisch je nach Inhaltsmenge. Sie können die Höhe der Miniaturen und andere Aspekte mit dem folgenden CSS-Klassenselektor konfigurieren:
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb
CSS-Eigenschaften des Thumb der Bildlaufleiste
state-Attributselektor , mit dem verschiedene Skins auf die up-, down-, over- und disabled angewendet werden können.Beispiel: Richten Sie einen Thumb für die Bildlaufleiste ein, der 28 x 45 Pixel groß ist, oben und unten 10 Pixelrä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);
}
Die Darstellung der oberen und unteren Bildlaufschaltflächen wird mit den folgenden CSS-Klassenselektoren gesteuert:
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton
Es ist nicht möglich, die Bildlaufschaltflächen mit den Eigenschaften CSS top, left, bottom und right zu positionieren. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.
CSS-Eigenschaften der Schaltfläche Nach oben scrollen und Nach unten scrollen
state Attributauswahl, mit der verschiedene Skins auf die Schaltflächenzustände up, down, over und disabled angewendet werden können.Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.
Beispiel - Richten Sie Scroll-Schaltflächen ein, die eine Größe von 28 x 32 Pixeln haben und unterschiedliche Grafiken für jeden Status 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);
}