Schaltfläche rechts drehen spin-right-button
Wenn Sie diese Schaltfläche auswählen, wird das Bild in der Hauptansicht 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:
.s7mixedmediaviewer .s7spinbuttons
Das Erscheinungsbild dieser Schaltfläche im Container wird mit dem CSS-Klassenselektor gesteuert:
.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton
Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden.
Siehe CSS-Sprites.
state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf verschiedene Schaltflächenzustände anzuwenden.Die QuickInfos für Schaltflächen können lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.
Beispiel: Zum Einrichten einer Schaltfläche mit der rechten Maustaste, die 28 x 28 Pixel groß ist und sich auf der rechten Kante des inneren Containers befindet. Schließlich zeigt für jeden der vier Schaltflächenstatus ein anderes Bild an:
.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton {
position:absolute;
right: 0px;
width:28px;
height:28px;
background-size:contain;
}
.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton[state='up'] {
background-image:url(images/v2/SpinRightButton_light_up.png);
}
.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton[state='over'] {
background-image:url(images/v2/SpinRightButton_light_over.png);
}
.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton[state='down'] {
background-image:url(images/v2/SpinRightButton_light_down.png);
}
.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton[state='disabled'] {
background-image:url(images/v2/SpinRightButton_light_disabled.png);
}