"Sset-Indikator"ist eine Reihe von Punkten, die auf den Hauptfeldern dargestellt werden, wenn ein Viewer auf einem Touch-Gerät verwendet wird. Die Punkte helfen Benutzern, durch die Seiten von Miniaturbildern zu navigieren, wenn keine Bildlaufschaltflächen verfügbar sind.
CSS-Eigenschaften des Satzindikators
Das Erscheinungsbild des Containers für den Set-Indikator wird mithilfe der folgenden CSS-Klassenauswahl gesteuert:
.s7mixedmediaviewer .s7setindicator
CSS-Eigenschaft |
Beschreibung |
---|---|
background-color |
Die Hintergrundfarbe im Hexadezimalformat des Satzindikators. |
Beispiel: So richten Sie einen Indikator mit einem weißen Hintergrund ein:
.s7mixedmediaviewer .s7setindicator {
background-color: #FFFFFF;
}
Das Erscheinungsbild eines einzelnen Datensatzindikatorpunkts wird mit der CSS-Klassenauswahl gesteuert:
.s7mixedmediaviewer .s7setindicator .s7dot
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Breite des Punkts für den Indikator. |
height |
Höhe des festgelegten Indikatorpunkts. |
margin-left |
Linker Rand in Pixel. |
margin-top |
Oberer Rand in Pixel. |
margin-right |
Rechter Rand in Pixel. |
margin-bottom |
Unterer Rand in Pixel. |
border-radius |
Rahmenradius in Pixel. |
background-color |
Hintergrundfarbe im Hexadezimalformat. |
Der Anzeigepunkt "Festlegen"unterstützt die Attributauswahl state
, mit der verschiedene Skins auf verschiedene Miniaturansichten angewendet werden können. Insbesondere entspricht state="selected"
der aktuellen Seite der Miniaturansichten, state="unselected"
dem Standardpunktstatus.
Beispiel: Um den Anzeigepunkt auf 15 x 15 Pixel mit zwei Pixel horizontalem Rand, fünf Pixel oberem Rand, einem Pixel unteren Rand, zwölf Pixel Radius, #D5D3D3-Standardfarbe und #939393 zu setzen, legen Sie folgende Farbe fest:
.s7mixedmediaviewer .s7setindicator .s7dot {
width:15px;
height:15px;
margin-left:2px;
margin-top:5px;
margin-right:2px;
margin-bottom:1px;
border-radius:12px;
background-color:#D5D3D3;
}
.s7mixedmediaviewer .s7setindicator .s7dot[state="selected"] {
background-color:#939393;
}