Schaltfläche „Miniaturen“ thumbnails-button
Durch Klicken auf diese Schaltfläche wird der Viewer zwischen der Hauptansicht und den Miniaturen zurückgesetzt. Diese Schaltfläche wird in der Hauptsteuerleiste angezeigt. Sie können diese Schaltfläche mithilfe von CSS skalieren, anpassen und positionieren.
CSS-Eigenschaften des Haupt-Viewer-Bereichs
Das Erscheinungsbild der Schaltfläche wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7ecatalogsearchviewer .s7thumbnailpagebutton
Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden.
Siehe auch CSS Sprites-.
state- als auch den selected-Attributselektor, mit dem verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können. Insbesondere entspricht selected='true' dem Viewer-Status, wenn der Miniaturansichtsmodus im aktiven Status ist, und selected='false' entspricht dem Standardstatus mit der Hauptansicht.Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.
Beispiel: So richten Sie eine Schaltfläche für Miniaturen ein, die 28 x 28 Pixel groß ist und 4 Pixel vom unteren Rand und 5 Pixel vom linken Rand der Hauptsteuerleiste entfernt positioniert ist. Und schließlich zeigt ein anderes Bild für jeden der vier verschiedenen Schaltflächenstatus an, wenn ausgewählt oder nicht ausgewählt.
.s7ecatalogsearchviewer .s7thumbnailpagebutton{
margin-top: 4px;
margin-left: 5px; width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='false'][state='up'] {
background-image:url(images/v2/ThumbnailPageButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='false'][state='over'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='false'][state='down'] {
background-image:url(images/v2/ThumbnailPageButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='false'][state='disabled'] {
background-image:url(images/v2/ThumbnailPageButton_dark_disabled.png);
}
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='true'][state='up'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='true'][state='over'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='true'][state='down'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='true'][state='disabled'] {
background-image:url(images/v2/ThumbnailPageButton_dark_disabled.png);
}