Schaltfläche „PlayPause“
Erstellt für:
- Entwickler
- Benutzende
Mit der Schaltfläche „Wiedergabe/Pause“ kann ein Benutzer das Karussell zur automatischen Wiedergabe anhalten oder fortsetzen.
Die Schaltfläche ist nur sichtbar, wenn der CarouselViewer.autoplay
auf 1
gesetzt ist, andernfalls ist sie ausgeblendet. Mithilfe von CSS können Sie diese Schaltfläche in der Größe, im Design und in der Position relativ zur darin enthaltenen Steuerleiste anpassen.
CSS-Eigenschaften des Haupt-Viewer-Bereichs
Das Erscheinungsbild der Schaltfläche wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7carouselviewer .s7playpausebutton
CSS-Eigenschaft | Beschreibung |
---|---|
Top- | Position oben am Viewer-Rahmen. |
rechte | Position rechts vom Viewer-Rahmen. |
linker | Position von links im Viewer. |
untere | Position am unteren Rand des Viewer-Rahmens. |
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 auch CSS Sprites-. |
Cursor- | Cursortyp. |
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.
Angenommen, Sie möchten eine Pause-Wiedergabeschaltfläche von 28 x 28 Pixel einrichten. Die Schaltfläche soll 17 Pixel vom unteren Rand und 12 Pixel vom linken Rand des Viewers entfernt platziert werden. Außerdem soll ein anderes Bild für jeden der vier verschiedenen Schaltflächenstatus angezeigt werden, wenn diese ausgewählt oder nicht ausgewählt sind.
.s7carouselviewer .s7playpausebutton {
bottom:17px;
left:12px;
width:28px;
height:28px;
}
.s7carouselviewer .s7playpausebutton[selected='true'][state='up'] {
background-image:url(images/playBtn_up.png);
}
.s7carouselviewer .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/playBtn_over.png);
}
.s7carouselviewer .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/playBtn_down.png);
}
.s7carouselviewer .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/playBtn_disabled.png);
}
.s7carouselviewer .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/pauseBtn_up.png);
}
.s7carouselviewer .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/pauseBtn_over.png);
}
.s7carouselviewer .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/pauseBtn_down.png);
}