Miniaturansichten

Miniaturansichten bestehen aus einem Raster von Miniaturbildern mit einer optionalen Bildlaufleiste auf der rechten Seite, um einen vertikalen Bildlauf zu ermöglichen.

Miniaturansichten werden umgeschaltet, indem Sie in der Hauptsteuerungsleiste auf die Schaltfläche "Miniaturansicht"klicken. Wenn Miniaturansichten aktiv sind, werden sie im Modalmodus über der Benutzeroberfläche des Viewers angezeigt. Die Viewer-Logik passt die Größe des Containers "Miniaturansichten"automatisch an den gesamten Viewer-Bereich an.

Das Erscheinungsbild des Containers thumbnails wird mithilfe der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7thumbnailgridview

CSS-Eigenschaft	Beschreibung
Anfang	Der vertikale Versatz des Containers "Miniaturansichten"vom oberen Rand des Viewers.
margin-top	Der obere Rand.
margin-left	Der linke Rand.
margin-right	Der rechte Rand.
margin-bottom	Der untere Rand.
background-color	Die Hintergrundfarbe des Bereichs "Miniaturansichten".

Beispiel: Um Miniaturansichten so einzurichten, dass sie 32 Pixel von oben, 5 Pixel Ränder von links und rechts und 8 Pixel Ränder von unten mit einem Hintergrund von 0xDDDDDD versetzen.

.s7ecatalogviewer .s7thumbnailgridview { 
 top: 32px; 
 margin-left: 5px; 
 margin-right: 5px; 
 margin-bottom: 8px; 
 background-color: rgb(221, 221, 221); 
}

Der Abstand zwischen den Miniaturbildern wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell

CSS-Eigenschaft	Beschreibung
margin	Die Größe des horizontalen und vertikalen Randes um die einzelnen Miniaturansichten. Der tatsächliche horizontale Abstand der Miniaturansichten ist gleich der Summe des linken und rechten Randes, der für .s7thumbcell festgelegt wird. Der vertikale Abstand der Miniaturansichten entspricht der Summe des oberen und unteren Randes.

Beispiel: Um einen 10-Pixel-Raum sowohl vertikal als auch horizontal festzulegen.

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell { 
 margin: 5px; 
}

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

.s7ecatalogviewer .s7thumbnailgridview .s7thumb

CSS-Eigenschaft	Beschreibung
width	Die Breite der Miniaturansicht.
height	Die Höhe der Miniaturansicht.
rand	Der Rand der Miniaturansicht.
background-color	Die Hintergrundfarbe der Miniaturansicht.

Bei Touch-Geräten kann der Viewer bei der Drehung in den Hochformat die Größe von Miniaturbildern auf die Hälfte der konfigurierten Größe anpassen, falls er beschließt, den Katalogbogen in einzelne Seiten zu teilen.

HINWEIS

Die Miniaturansicht unterstützt die Attributauswahl state, mit der verschiedene Skins auf verschiedene Miniaturansichten angewendet werden können. Insbesondere entspricht state="selected" der Miniaturansicht für das Bild, das derzeit in der Haupt-Ansicht angezeigt wird, state="default" dem Rest der Miniaturansichten entspricht und state="over" beim Bewegen der Maus verwendet wird.

Beispiel: Zum Einrichten von Miniaturbildern mit einer Größe von 120 x 85 Pixel, einem weißen Hintergrund, einem hellgrauen Standardrand und einem dunkelgrauen Rahmen.

.s7ecatalogviewer .s7thumbnailgridview .s7thumb { 
 width:120px; 
 height:85px; 
 background-color: rgb(255, 255, 255); 
 border: solid 1px #999999; 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7thumb[state="selected"]{ 
 border: solid 2px #666666; 
}

Die Darstellung der Miniaturansichtsbeschriftung wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7thumbnailgridview .s7label

CSS-Eigenschaft	Beschreibung
font-family	Schriftname.
font-size	Schriftgröße.

Beispiel: Um Beschriftungen so einzurichten, dass eine Helvetica-Schrift mit 14 Pixel verwendet wird.

.s7ecatalogviewer .s7thumbnailgridview .s7label { 
 font-family: Helvetica,sans-serif; 
 font-size: 12px; 
}

Wenn mehr Miniaturansichten vorhanden sind, als vertikal in die Ansicht passen können, rendert das Miniaturbild die vertikale Bildlaufleiste auf der rechten Seite. Das Erscheinungsbild des Bereichs der Bildlaufleiste wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar

CSS-Eigenschaft	Beschreibung
width	Die Breite der Bildlaufleiste.
Anfang	Die vertikale Bildlaufleiste wird vom oberen Rand des Miniaturansichtsbereichs versetzt.
unten	Die vertikale Bildlaufleiste wird vom unteren Rand des Bereichs der Miniaturansichten versetzt.
rechts	Die horizontale Bildlaufleiste wird vom rechten Rand des Bereichs der Miniaturansichten versetzt.

Beispiel: Zum Einrichten einer Bildlaufleiste mit einer Breite von 28 Pixeln und einem Rand von 8 Pixeln von oben, rechts und unten im Bereich der Miniaturansichten.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar { 
 top:8px; 
 bottom:8px; 
 right:8px; 
 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 .s7thumbnailgridview .s7scrollbar .s7scrolltrack

CSS-Eigenschaft	Beschreibung
width	Die Breite der Bildlaufleistenspur.
background-color	Die Hintergrundfarbe der Bildlaufleistenspur.

Beispiel: Zum Einrichten einer Bildlaufleiste mit einer Breite von 28 Pixeln und einem halbtransparenten grauen Hintergrund.

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

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

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSS-Eigenschaft	Beschreibung
width	Die Breite des Bildlaufleistenminiaturbilds.
height	Die Höhe der Miniaturansicht der Bildlaufleiste.
padding-top	Die vertikale Umrandung zwischen dem oberen Rand der Bildlaufleistenspur.
padding-bottom	Die vertikale Auffüllung zwischen dem unteren Rand der Bildlaufleistenspur.
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, mit der verschiedene Skins auf die Thumb-Status up, down, over und disabled angewendet werden können.

Beispiel: Zum Einrichten eines Bildlaufleistenminiaturbilds mit 28 x 45 Pixeln, mit 10 Pixeln am oberen und unteren Rand und unterschiedlicher Grafik für jeden Status.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb { 
 width:28px; 
 background-repeat:no-repeat; 
 background-position:center; 
 height:45px; 
 padding-top:10px; 
 padding-bottom:10px; 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png); 
}

Die Darstellung der Schaltflächen für den oberen und unteren Bildlauf wird mithilfe der folgenden CSS-Klassenselektoren gesteuert:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .s7thumbnailgridview .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-Eigenschaft	Beschreibung
width	Die Breite der Schaltfläche.
height	Die Höhe der Schaltfläche.
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

Diese Schaltflächen unterstützen die Attributauswahl state, mit der verschiedene Skins auf die verschiedenen 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: Um Bildlaufschaltflächen einzurichten, die 28 x 32 Pixel groß sind und für jeden Status ein anderes Bildmaterial haben.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png); 
}