Schaltfläche rechts drehen

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 .

HINWEIS

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

Die QuickInfo der Schaltfläche kann lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen.

Beispiel: Zum Einrichten einer Schaltfläche mit der rechten Rotation, die 28 x 28 Pixel groß ist und sich auf der rechten Kante des inneren Containers befindet und für jeden der vier verschiedenen Schaltflächenstatus ein anderes Bild anzeigt:

.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); 
}

Auf dieser Seite