Schaltfläche rechts drehen spin-right-button

Wenn Sie auf diese Schaltfläche klicken oder tippen, wird das Bild in der Hauptansicht nach rechts 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 .s7panrightbutton
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: Zum Einrichten einer rechts kreisförmigen Schaltfläche mit 28 x 28 Pixel, die sich auf der rechten Kante des inneren Containers befindet. Schließlich zeigt für jeden der vier Schaltflächenstatus ein anderes Bild an:

.s7spinviewer .s7spinbuttons .s7panrightbutton {
 position:absolute;
 right: 0px;
 width:28px;
 height:28px;
 background-size:contain;
 }
.s7spinviewer .s7spinbuttons .s7panrightbutton[state='up'] {
background-image:url(images/v2/SpinRightButton_light_up.png);
}
.s7spinviewer .s7spinbuttons .s7panrightbutton[state='over'] {
background-image:url(images/v2/SpinRightButton_light_over.png);
}
.s7spinviewer .s7spinbuttons .s7panrightbutton[state='down'] {
 background-image:url(images/v2/SpinRightButton_light_down.png);
}
.s7spinviewer .s7spinbuttons .s7panrightbutton[state='disabled'] {
 background-image:url(images/v2/SpinRightButton_light_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8