DokumentationDynamic Media Viewer-Referenzhandbuch

Schaltfläche „Vollbild“ full-screen-button

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

Erstellt für:

  • Entwickler
  • Benutzende

Bewirkt, dass der Viewer in den Vollbildmodus wechselt oder diesen verlässt, wenn er vom Benutzer ausgewählt wurde. Diese Schaltfläche wird nicht angezeigt, wenn der Viewer im Popup-Modus funktioniert und das System keinen nativen Vollbildmodus unterstützt. Sie können diese Schaltfläche mithilfe von CSS skalieren, anpassen und positionieren.

CSS-Eigenschaften des Haupt-Viewer-Bereichs

Das Erscheinungsbild der Schaltfläche wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7basiczoomviewer .s7fullscreenbutton
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 sowohl den state- als auch den selected-Attributselektor, mit dem verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können. Insbesondere entspricht selected='true' dem „Vollbild“-Zustand und selected='false' dem „Normal“-Zustand.

Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel: Einrichten einer Vollbildschaltfläche mit 32 x 32 Pixel, die sechs Pixel vom oberen und rechten Rand des Viewers entfernt positioniert ist. Es muss für jeden der vier verschiedenen Schaltflächenstatus ein anderes Bild anzeigen, wenn ausgewählt oder nicht ausgewählt:

.s7basiczoomviewer .s7fullscreenbutton {
top:6px;
right:6px;
width:32px;
height:32px;
}
.s7basiczoomviewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7basiczoomviewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7basiczoomviewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7basiczoomviewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7basiczoomviewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7basiczoomviewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7basiczoomviewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7basiczoomviewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8