Schaltfläche „Große nächste Seite“ large-next-page-button
Wenn Sie diese Schaltfläche auswählen, gelangen Sie zur nächsten Seite im Katalog. Diese Schaltfläche wird in der Hauptsteuerleiste angezeigt. Diese Schaltfläche wird auf Mobiltelefonen nicht angezeigt, um Platz auf dem Bildschirm zu sparen. 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 .s7ecatrightbutton .s7panrightbutton
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: Eine große Schaltfläche für die nächste Seite mit einer Größe von 56 x 56 Pixel wird vertikal zentriert und am rechten Viewer-Rahmen verankert. Für jeden der vier verschiedenen Schaltflächenstatus wird ein anderes Bild angezeigt.
.s7ecatalogsearchviewer .s7ecatrightbutton .s7panrightbutton {
bottom:50%;
margin-bottom:-28px;
right:0px;
width:56px;
height:56px;
}
.s7ecatalogsearchviewer .s7ecatrightbutton .s7panrightbutton [state='up'] {
background-image:url(images/v2/RightButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7ecatrightbutton .s7panrightbutton [state='over'] {
background-image:url(images/v2/RightButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7ecatrightbutton .s7panrightbutton [state='down'] {
background-image:url(images/v2/RightButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7ecatrightbutton .s7panrightbutton [state='disabled'] {
background-image:url(images/v2/RightButton_dark_disabled.png);
}