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 durch Klicken auf die Schaltfläche "Miniatur"in der Hauptsteuerleiste ein-/ausgeblendet. Wenn Miniaturansichten aktiv sind, werden sie im Modalmodus angezeigt, der über der Viewer-Benutzeroberfläche überlagert wird. Die Viewer-Logik passt die Größe des Containers für Miniaturansichten automatisch an den gesamten Viewer-Bereich an.

Das Erscheinungsbild des Containers für Miniaturansichten wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogsearchviewer .s7thumbnailgridview

CSS-Eigenschaft

Beschreibung

Anfang

Der vertikale Versatz des Containers für Miniaturansichten am 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 einen Abstand von 32 Pixel von der oberen Seite, 5 Pixel Ränder von links und rechts und 8 Pixel Ränder von unten mit 0xDDDDDD Hintergrund aufweisen.

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

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

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell

CSS-Eigenschaft

Beschreibung

margin

Die Größe des horizontalen und vertikalen Rands um jede Miniaturansicht. Der tatsächliche horizontale Abstand für Miniaturansichten entspricht der Summe des linken und rechten Rands, der für .s7thumbcell festgelegt ist. Der vertikale Abstand der Miniaturansichten entspricht der Summe des oberen und unteren Rands.

Beispiel: Zum Festlegen eines 10-Pixel-Bereichs sowohl vertikal als auch horizontal.

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

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

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

CSS-Eigenschaft

Beschreibung

width

Die Breite der Miniaturansicht.

height

Die Höhe der Miniaturansicht.

rand

Der Rahmen der Miniaturansicht.

background-color

Die Hintergrundfarbe der Miniaturansicht.

Wenn der Viewer auf Touch-Geräten in den Hochformat gedreht wird, kann er die Größe von Miniaturansichten auf die Hälfte der konfigurierten Größe anpassen, falls er beschließt, den Katalog-Spread in einzelne Seiten aufzuteilen.

HINWEIS

Miniaturansichten unterstützen den Attributselektor state, der verwendet werden kann, um verschiedene Skins auf verschiedene Miniaturansichten anzuwenden. Insbesondere state="selected" entspricht der Miniaturansicht des Bildes, das derzeit in der Hauptansicht angezeigt wird, state="default" dem Rest der Miniaturansichten entspricht und state="over" beim Bewegen des Mauszeigers verwendet wird.

Beispiel: Zum Einrichten von Miniaturansichten mit einer Größe von 120 x 85 Pixel, einem weißen Hintergrund, einem hellgrauen Standardrahmen und einem dunkelgrauen ausgewählten Rahmen.

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

Das Erscheinungsbild der Miniaturansichtsbeschriftung wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label

CSS-Eigenschaft

Beschreibung

Schriftfamilie

Schriftname.

Schriftgröße

Schriftgröße.

Beispiel: Zum Einrichten von Beschriftungen für die Verwendung der Helvetica-Schriftart mit 14 Pixel.

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

Wenn mehr Miniaturansichten vorhanden sind, als vertikal in die Ansicht passen, rendert die Miniaturansicht die vertikale Bildlaufleiste auf der rechten Seite. Das Erscheinungsbild des Bildlaufleistenbereichs wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar

CSS-Eigenschaft

Beschreibung

width

Die Breite der Bildlaufleiste.

Anfang

Der Versatz der vertikalen Bildlaufleiste am oberen Rand des Bereichs "Miniaturansichten".

unten

Der Versatz der vertikalen Bildlaufleiste am unteren Rand des Bereichs "Miniaturansichten".

rechts

Der horizontale Versatz der Bildlaufleiste vom rechten Rand des Bereichs "Miniaturansichten".

Beispiel: Zum Einrichten einer Bildlaufleiste, die 28 Pixel breit ist und eine 8-Pixel-Spanne von oben, rechts und unten im Bereich der Miniaturansichten aufweist.

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

CSS-Eigenschaft

Beschreibung

width

Die Breite der Bildlaufleiste.

background-color

Die Hintergrundfarbe der Bildlaufleiste.

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

.s7ecatalogsearchviewer .s7thumbnailgridview .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 vollständig von der Komponentenlogik gesteuert, die Thumb-Höhe ändert sich jedoch nicht dynamisch in Abhängigkeit von der Menge des Inhalts. Die Daumenhöhe und andere Aspekte werden mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSS-Eigenschaft

Beschreibung

width

Die Breite des Daumens der Bildlaufleiste.

height

Die Höhe der Miniaturansicht der Bildlaufleiste.

Auffüllung

Der vertikale Abstand zwischen dem oberen Rand des Bildlaufleisten-Tracks.

padding-bottom

Der vertikale Abstand zwischen dem unteren Rand des Bildlaufleisten-Trackings.

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 Daumenstatus up, down, over und disabled anzuwenden.

Beispiel: Um einen Bildlaufleisten-Daumen mit 28 x 45 Pixel einzurichten, hat oben und unten 10 Pixel Ränder und hat für jeden Status unterschiedliche Grafiken.

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

.s7ecatalogsearchviewer .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 Bildsprites, wenn CSS-Sprites verwendet werden.

Siehe auch CSS-Sprites .

HINWEIS

Diese Schaltflächen unterstützen den Attributselektor state, der verwendet werden kann, um verschiedene Skins auf die verschiedenen Schaltflächenzustände up, down, over und disabled anzuwenden.

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

Beispiel: Zum Einrichten von Bildlauftasten mit 28 x 32 Pixel und unterschiedlicher Grafik für jeden Status.

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

Auf dieser Seite