Zurücksetzen-Schaltfläche für Zoom zoom-reset-button
Durch Klicken auf diese Schaltfläche wird ein Bild in der Hauptansicht zurückgesetzt. Diese Schaltfläche wird auf Desktop-Systemen und Tablets in der Hauptsteuerleiste angezeigt. Auf Mobiltelefonen wird diese Schaltfläche in der unteren Mitte über dem Bild angezeigt. Sie wird jedoch nicht angezeigt, wenn sich das Bild im zurückgesetzten Zustand befindet. 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 .s7zoomresetbutton
Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden.
Siehe auch CSS Sprites-.
state-Attributauswahl, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.
Beispiel: So richten Sie eine Zurücksetzen-Schaltfläche für den Zoom ein, die 28 x 28 Pixel groß ist und (auf dem Desktop) 4 Pixel vom unteren Rand und 47 Pixel vom rechten Rand der Hauptsteuerleiste entfernt positioniert ist. Schließlich zeigt für jeden der vier verschiedenen Schaltflächenzustände ein eigenes Bild an.
.s7ecatalogsearchviewer .s7zoomresetbutton {
bottom:4px;
right:47px;
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7zoomresetbutton [state='up'] {
background-image:url(images/v2/ZoomResetButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7zoomresetbutton [state='over'] {
background-image:url(images/v2/ZoomResettButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7zoomresetbutton [state='down'] {
background-image:url(images/v2/ZoomResetButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7zoomresetbutton [state='disabled'] {
background-image:url(images/v2/ZoomResetButton_dark_disabled.png);
}