Schaltfläche "Nach links drehen" spin-left-button

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.

NOTE
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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8