Indikator festlegen

"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.

HINWEIS

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;  
}