DokumentationDynamic Media Viewer-Referenzhandbuch

Rechter Drehknopf spin-right-button

Last update: Mon Dec 23 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Entwickler
  • Benutzende

Durch Auswahl dieser Schaltfläche wird das Bild in der Hauptansicht nach rechts 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:

.s7mixedmediaviewer .s7spinbuttons
CSS-Eigenschaft
Beschreibung
Top-
Position ab dem oberen Rahmen, einschließlich Auffüllung.
rechte
Position vom rechten Rand aus, einschließlich Abstand.
linker
Position vom linken Rand aus, einschließlich Auffüllung.
untere
Position ab dem unteren Rand, einschließlich Abstand.
Breite
Breite der Schaltfläche.
Höhe
Höhe der Schaltfläche.

Das Erscheinungsbild dieser Schaltfläche im Container wird mit dem CSS-Klassenselektor gesteuert:

.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton
CSS-Eigenschaft
Beschreibung
Top-
Position ab dem oberen Rahmen, einschließlich Auffüllung.
rechte
Position vom rechten Rand aus, einschließlich Abstand.
linker
Position vom linken Rand aus, einschließlich Auffüllung.
untere
Position ab dem unteren Rand, einschließlich Abstand.
Breite
Breite der Schaltfläche.
Höhe
Höhe der Schaltfläche.
Hintergrundbild-
Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird.
Hintergrundposition

Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden.

Siehe von CSS-Sprites.

NOTE
Diese Schaltfläche unterstützt die state-Attributauswahl, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.

Die QuickInfos für die Schaltfläche können lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel: So richten Sie eine rechte Drehschaltfläche ein, die 28 x 28 Pixel groß ist und sich am rechten Rand des inneren Containers befindet. Schließlich zeigt für jeden der vier verschiedenen Schaltflächenstatus ein eigenes 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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8