Nach links drehen spin-left-button
Durch Klicken oder Tippen auf diese Schaltfläche wird das Bild in der Hauptansicht nach links gedreht. Diese Schaltfläche wird auf Mobiltelefonen nicht angezeigt, um Platz auf dem Bildschirm zu sparen. Außerdem wird die Schaltfläche ausgeblendet, wenn ein mehrdimensionales Rotationsset verwendet wird. Sie können die Schaltfläche mithilfe von CSS skalieren, mit der Haut versehen und positionieren.
CSS-Eigenschaften der Rotationssymbole
Die Schaltfläche wird zu einem internen Container hinzugefügt, der mit dem CSS-Klassenselektor DIV-gesteuert wird:
.s7spinviewer .s7spinbuttons
Das Erscheinungsbild dieser Schaltfläche im Container wird mit dem CSS-Klassenselektor gesteuert:
.s7spinviewer .s7spinbuttons .s7panleftbutton
Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden.
Siehe von CSS-Sprites.
state-Attributauswahl, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.
Beispiel: So richten Sie eine linke Drehschaltfläche ein, die 28 x 28 Pixel groß ist und sich am linken Rand des inneren Containers befindet. Schließlich zeigt für jeden der vier verschiedenen Schaltflächenstatus ein eigenes 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);
}