Verursacht, dass der Viewer den Vollbildmodus aufruft oder verlässt, wenn der Benutzer darauf klickt. Diese Schaltfläche wird in der Hauptsteuerungsleiste angezeigt. Diese Schaltfläche wird nicht angezeigt, wenn der Viewer im Popupmodus funktioniert und das System keinen nativen Vollbildmodus unterstützt. Sie können die Größe, die Skin und die Position der Schaltfläche mithilfe von CSS festlegen.
CSS-Eigenschaften des Haupt-Viewer-Bereichs
Das Erscheinungsbild der Schaltfläche wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7ecatalogviewer .s7fullscreenbutton
CSS-Eigenschaft |
Beschreibung |
---|---|
Anfang |
Position vom oberen Rand der Hauptsteuerleiste, einschließlich Auffüllung. |
rechts |
Position vom rechten Rand der Hauptsteuerleiste, einschließlich Auffüllung. |
links |
Position vom linken Rand der Hauptsteuerleiste, einschließlich Auffüllung. |
unten |
Position vom unteren Rand der Hauptsteuerleiste, 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 auch 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. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.
Beispiel: Zum Einrichten einer Vollbildschaltfläche mit 28 x 28 Pixeln, die 4 Pixel vom unteren Rand und 5 Pixel vom rechten Rand der Hauptsteuerungsleiste positioniert ist, und zum Anzeigen eines anderen Bilds für jeden der vier verschiedenen Schaltflächenzustände, wenn diese ausgewählt oder nicht ausgewählt sind.
.s7ecatalogviewer .s7fullscreenbutton {
bottom:4px;
right:5px;
width:28px;
height:28px;
}
.s7ecatalogviewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}