Schaltfläche „Vollbild“ full-screen-button
Diese Schaltfläche bewirkt, dass der Viewer in den Vollbildmodus wechselt oder diesen verlässt, wenn er vom Benutzer ausgewählt wird. Er wird verwendet, wenn der Viewer Bilder oder Rotationssets anzeigt. 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:
.s7mixedmediaviewer .s7fullscreenbutton
Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden.
Siehe von CSS-Sprites.
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: So richten Sie eine Vollbildschaltfläche ein, die 32 x 32 Pixel groß ist und sechs Pixel vom oberen und rechten Rand des Viewers entfernt positioniert ist. Und schließlich zeigt ein anderes Bild für jeden der vier verschiedenen Schaltflächenstatus an, wenn ausgewählt oder nicht ausgewählt:
.s7mixedmediaviewer .s7fullscreenbutton {
top:6px;
right:6px;
width:32px;
height:32px;
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}