Inhaltsverzeichnis

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 dies die erste Schaltfläche 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 .

HINWEIS

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

Die QuickInfo der Schaltfläche kann lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen.

Beispiel: Richten Sie eine Inhaltsverzeichnisschaltfläche ein, die 4 Pixel vom unteren Rand und 43 Pixel vom linken Rand der Hauptsteuerungsleiste entfernt angeordnet ist. ist 28 x 28 Pixel groß 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.

HINWEIS

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 der einzelnen Elemente 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.

HINWEIS

Das Dropdown-Listenelement unterstützt den Attributselektor state, der verwendet werden kann, um verschiedene Skins auf den Mauszeiger und die ausgewählten Elementstatus anzuwenden.

Beispiel: Richten Sie ein Dropdown-Element mit einer Helvetica-Schrift mit 14 Pixel und einer Höhe von 19 Pixel 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.

HINWEIS

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

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 mehr Elemente vorhanden sind, die im Dropdown-Bedienfeld 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 .

HINWEIS

Thumb unterstützt den Attributselektor state, der verwendet werden kann, um verschiedene Skins auf die Faustregeln up, down, over und disabled anzuwenden.

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 Bildlauftasten mithilfe der CSS-Eigenschaften 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"

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 .

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 der Schaltfläche kann lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen.

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

Auf dieser Seite