Inhaltsverzeichnis

Das Inhaltsverzeichnis ist eine Schaltfläche in der Hauptsteuerungsleiste. Wenn diese Option aktiviert ist, wird ein Dropdownfeld mit einer Liste von Seitenindizes und -beschriftungen angezeigt.

Je nach Konfiguration kann die Liste alle im Katalog vorhandenen Seiten oder nur die Seiten mit expliziten Bezeichnungen enthalten. Wenn die Liste auf Desktop-Systemen länger als die verfügbare Bildschirmgröße ist, wird rechts eine Bildlaufleiste angezeigt.

Die Position und Größe der Inhaltsverzeichnisschaltfläche in der Benutzeroberfläche des Viewers werden mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7tableofcontents

CSS-Eigenschaften des Inhaltsverzeichnisses

margin-top	Der Offset vom oberen Rand der Steuerleiste.
margin-left	Der Abstand zur nächsten Schaltfläche links oder zur linken Seite der Steuerungsleiste, wenn dies die erste Schaltfläche in einer Zeile ist.
width	Die Breite des Inhaltsverzeichnisses.
height	Die Höhe der Inhaltsverzeichnis-Schaltfläche.
background-image	Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird.
background-position	Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden. Siehe auch CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt die Attributauswahl state, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.

Die QuickInfo für Schaltflächen kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: Legen Sie eine Inhaltsverzeichnis-Schaltfläche fest, die 4 Pixel von der unteren Seite und 43 Pixel von der linken Seite der Hauptsteuerungsleiste positioniert wird. Die Größe beträgt 28 x 28 Pixel, und für jeden der vier Schaltflächenzustände 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 Offset zwischen den Bereichsgrenzen und dem Inhalt.
box-shadow	Schlagschatten um das Bedienfeld

HINWEIS

Die Größe oder Position des Dropdown-Bedienfelds kann nicht über CSS gesteuert werden; die Komponente ihr Layout programmgesteuert verwaltet.

Beispiel: Richten Sie ein Dropdown-Bedienfeld ein, das einen halbtransparenten schwarzen Hintergrund, einen Rand von 5 Pixeln um den Inhalt und einen Schlagschatten hat:

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

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7item

CSS-Eigenschaften des Elements

font-family	Schriftname.
font-size	Schriftgröße.
height	Höhe des Elements.
Padding	Interne Auffüllung.

HINWEIS

Dropdown-Listen unterstützen die Attributauswahl state, mit der verschiedene Skins auf den Status "Cursor darüber"und "Ausgewählte Elemente"angewendet werden können.

Beispiel: Richten Sie ein Dropdown-Element mit einer Helvetica 14 Pixel und einer Höhe von 19 Pixel ein. Ein Element hat einen dunkelgrauen Hintergrund beim Bewegen der Maus und einen hellgrauen Hintergrund, wenn ausgewählt:

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

min-width	Mindestelementbreite.
max-width	Maximale Elementbreite.
padding-right	Abstand zwischen dem Seitenindex und der Seitenbeschriftung.

HINWEIS

Es ist möglich, den Seitenindex vollständig auszublenden, indem display:none für die CSS-Klasse s7index eingestellt wird.

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: Ausblenden des Seitenindex:

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

Die Seitenbeschriftung wird mit der folgenden CSS-Klassenauswahl 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 mehr Elemente vorhanden sind, als vertikal in das Dropdown-Feld 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 mithilfe der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar

CSS-Eigenschaften der Bildlaufleiste

width	Die Breite der Bildlaufleiste.
Anfang	Die vertikale Bildlaufleiste wird vom oberen Rand des Bedienfeldbereichs versetzt.
unten	Die vertikale Bildlaufleiste wird vom unteren Rand des Bedienfeldbereichs versetzt.
rechts	Die horizontale Bildlaufleiste wird vom rechten Rand des Bedienfeldbereichs versetzt.

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 Bildlaufleistenspur ist der Bereich zwischen den Schaltflächen für den oberen und unteren Bildlauf. Die Komponente legt automatisch die Position und Höhe der Leiste fest. Die Spur wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

CSS-Eigenschaften der Bildlaufspur

width	Die Spurbreite.
background-color	Die Trackhintergrundfarbe.

Beispiel: Richten Sie eine Bildlaufleistenspur ein, die 28 Pixel breit und einen halbtransparenten grauen Hintergrund hat:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack { 
 width:28px; 
 background-color:rgba(102, 102, 102, 0.5); 
}

Der Bildlaufleistenminiaturbereich bewegt sich vertikal innerhalb des Bildlaufspurbereichs. Seine vertikale Position wird durch die Komponentenlogik gesteuert. Die Höhe des Thumbs ändert sich jedoch nicht dynamisch je nach Inhaltsmenge. Sie können die Thumb-Höhe und andere Aspekte mit der folgenden CSS-Klassenauswahl konfigurieren:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

CSS-Eigenschaften der Bildlaufleiste

width	Die Daumenbreite.
height	Die Daumenhöhe.
padding-top	Die vertikale Umrandung zwischen der Oberkante der Leiste.
padding-bottom	Die vertikale Umrandung zwischen dem unteren Ende der Leiste.
background-image	Das Bild, das für einen bestimmten Daumenstatus angezeigt wird.
background-position	Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden. Siehe auch CSS-Sprites .

HINWEIS

Thumb unterstützt die Attributauswahl state, die verwendet werden kann, um verschiedene Skins auf die Miniaturzustände up, down, over und disabled anzuwenden.

Beispiel: Richten Sie ein Bildlauffeld ein, das 28 x 45 Pixel groß ist, oben und unten 10 Pixel breit ist und für jeden Status ein anderes Bildmaterial enthält:

.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 Schaltflächen für den oberen und unteren Bildlauf wird mithilfe der folgenden CSS-Klassenselektoren gesteuert:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton

Die Bildlaufschaltflächen können nicht mit den Eigenschaften CSS top, left, bottom und right positioniert werden. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.

CSS-Eigenschaften der Schaltfläche "Nach oben"und "Nach unten"

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 Bildausschnitt, wenn CSS-Sprites verwendet werden. Siehe auch CSS-Sprites .

HINWEIS

Button unterstützt die Attributauswahl state, mit der verschiedene Skins auf die Schaltflächenzustände up, down, over und disabled angewendet werden können.

Die QuickInfo für Schaltflächen kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: Richten Sie Bildlaufschaltflächen ein, die 28 x 32 Pixel groß sind und für jeden Status ein anderes Bildmaterial haben:

.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); 
}