Wenn Sie auf diese Schaltfläche klicken oder tippen, wird der Benutzer zur ersten Seite des Katalogs geleitet. Diese Schaltfläche wird in der Hauptsteuerleiste auf Desktop-Systemen und Tablets angezeigt. auf Mobiltelefonen wird sie zu einer sekundären Kontrollleiste hinzugefügt. Mithilfe von CSS können Sie diese Schaltfläche vergrößern, verkleinern und positionieren.
CSS-Eigenschaften des Haupt-Viewer-Bereichs
Das Erscheinungsbild der Schaltfläche wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton
CSS-Eigenschaft |
Beschreibung |
---|---|
Anfang |
Position vom oberen Rand der Hauptsteuerleiste (auf Desktop-Systemen und Tablets) oder der sekundären Steuerleiste (auf Mobiltelefonen), einschließlich Abstandflächen. |
rechts |
Position vom rechten Rand der Hauptsteuerleiste (auf Desktop-Systemen und Tablets) oder der sekundären Steuerleiste (auf Mobiltelefonen), einschließlich Abstandflächen. |
links |
Position vom linken Rand der Hauptsteuerleiste (auf Desktop-Systemen und Tablets) oder der sekundären Steuerleiste (auf Mobiltelefonen), einschließlich Abstandflächen. |
unten |
Position vom unteren Rand der Hauptsteuerleiste (auf Desktop-Systemen und Tablets) oder der sekundären Steuerleiste (auf Mobiltelefonen), einschließlich Abstandflächen. |
width |
Breite der Schaltfläche. |
height |
Höhe der Schaltfläche. |
background-image |
Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird. |
background-position |
Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden. Siehe auch CSS-Sprites . |
Diese Schaltfläche unterstützt state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf verschiedene Schaltflächenzustände anzuwenden.
Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.
Beispiel: Um eine Schaltfläche für die erste Seite einzurichten, die 28 x 28 Pixel groß ist und 4 Pixel vom unteren Rand und 220 Pixel vom linken Rand der Hauptsteuerleiste positioniert. Und schließlich zeigt ein anderes Bild für jeden der vier verschiedenen Schaltflächenstatus an.
.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton {
bottom:4px;
left:220px;
width:32px;
height:32px;
}
.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton [state='up'] {
background-image:url(images/v2/FirstPageButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton [state='over'] {
background-image:url(images/v2/FirstPageButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton [state='down'] {
background-image:url(images/v2/FirstPageButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton [state='disabled'] {
background-image:url(images/v2/FirstPageButton_dark_disabled.png);
}