Schaltfläche „PlayPause“

Letzte Aktualisierung: 31. Dezember 2024
  • Themen:

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-EigenschaftBeschreibung
Top-Position oben am Viewer-Rahmen.
rechtePosition rechts vom Viewer-Rahmen.
linkerPosition von links im Viewer.
unterePosition am unteren Rand des Viewer-Rahmens.
BreiteBreite der Schaltfläche.
HöheHö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.
NOTE
Diese Schaltfläche unterstützt die 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);
}
Vorherige SeiteNächste Folie
Nächste SeiteVorherige Folie

Experience Manager