Wenn Sie auf diese Schaltfläche klicken oder tippen, wird das Bild in der Hauptansicht nach links gedreht. Diese Schaltfläche wird nicht auf Mobiltelefonen angezeigt, um die Grundstücksgröße auf dem Bildschirm zu sparen. Außerdem ist die Schaltfläche ausgeblendet, wenn ein mehrdimensionales Rotationsset verwendet wird. Sie können die Schaltfläche mithilfe von CSS vergrößern, verkleinern und positionieren.
CSS-Eigenschaften der Rotationsschaltflächen
Die Schaltfläche wird einem internen Container hinzugefügt, der mit dem CSS-Klassenselektor DIV gesteuert wird:
.s7spinviewer .s7spinbuttons
CSS-Eigenschaft |
Beschreibung |
---|---|
Anfang |
Position vom oberen Rand, einschließlich Abstand. |
rechts |
Position vom rechten Rand, einschließlich Abstand. |
links |
Position vom linken Rand, einschließlich Abstand. |
unten |
Position vom unteren Rand, einschließlich Abstand. |
width |
Breite der Schaltfläche. |
height |
Höhe der Schaltfläche. |
Das Erscheinungsbild dieser Schaltfläche im Container wird mit dem CSS-Klassenselektor gesteuert:
.s7spinviewer .s7spinbuttons .s7panleftbutton
CSS-Eigenschaft |
Beschreibung |
---|---|
Anfang |
Position vom oberen Rand, einschließlich Abstand. |
rechts |
Position vom rechten Rand, einschließlich Abstand. |
links |
Position vom linken Rand, einschließlich Abstand. |
unten |
Position vom unteren Rand, einschließlich Abstand. |
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 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 mit der linken Maustaste einzurichten, die 28 x 28 Pixel groß ist und sich auf der linken Kante des inneren Containers befindet. Schließlich zeigt für jeden der vier Schaltflächenstatus ein anderes Bild an:
.s7spinviewer .s7spinbuttons .s7panleftbutton {
position:absolute;
left: 0px;
width:28px;
height:28px;
background-size:contain;
}
.s7spinviewer .s7spinbuttons .s7panleftbutton[state='up'] {
background-image:url(images/v2/SpinLeftButton_light_up.png);
}
.s7spinviewer .s7spinbuttons .s7panleftbutton[state='over'] {
background-image:url(images/v2/SpinLeftButton_light_over.png);
}
.s7spinviewer .s7spinbuttons .s7panleftbutton[state='down'] {
background-image:url(images/v2/SpinLeftButton_light_down.png);
}
.s7spinviewer .s7spinbuttons .s7panleftbutton[state='disabled'] {
background-image:url(images/v2/SpinLeftButton_light_disabled.png);
}