Verursacht, dass der Viewer den Vollbildmodus aufruft oder verlässt, wenn der Benutzer darauf klickt. Diese Schaltfläche wird nicht angezeigt, wenn der Viewer im Popupmodus funktioniert und das System den nativen Vollbildmodus nicht unterstützt. Mithilfe von CSS können Sie diese Schaltfläche vergrößern, verkleinern und positionieren.
CSS-Eigenschaften des Haupt-Viewer-Bereichs
Das Erscheinungsbild der Schaltfläche wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7zoomviewer .s7fullscreenbutton
CSS-Eigenschaft |
Beschreibung |
---|---|
Anfang |
Position vom oberen Rand, einschließlich Auffüllung. |
rechts |
Position vom rechten Rand, einschließlich Auffüllung. |
links |
Position vom linken Rand, einschließlich Auffüllung. |
unten |
Position vom unteren Rand, einschließlich Auffüllung. |
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 Bildausschnitt, wenn CSS-Sprites verwendet werden. Siehe CSS-Sprites . |
Diese Schaltfläche unterstützt sowohl die Attributselektoren state
als auch selected
, die verwendet werden können, um verschiedene Skins auf verschiedene Schaltflächenzustände anzuwenden. Insbesondere entspricht selected='true'
dem Status "Vollbild"und selected='false'
dem Status “normal”.
Die QuickInfo für Schaltflächen kann lokalisiert werden. Siehe Lokale Anpassung der Elemente der Benutzeroberfläche.
Beispiel: Um eine Vollbildschaltfläche mit 32 x 32 Pixeln einzurichten, die sechs Pixel vom oberen und rechten Rand des Viewers entfernt ist und ein anderes Bild für jeden der vier verschiedenen Schaltflächenzustände anzeigt, wenn diese ausgewählt oder nicht ausgewählt sind:
.s7zoomviewer .s7fullscreenbutton {
top:6px;
right:6px;
width:32px;
height:32px;
}
.s7zoomviewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7zoomviewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7zoomviewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7zoomviewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7zoomviewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7zoomviewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7zoomviewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7zoomviewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}