Indikator festlegen

Unter "Sset-Indikator"versteht man eine Reihe von Punkten, die über den Farbfeldern 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:

.s7zoomviewer .s7setindicator

CSS-Eigenschaft

Beschreibung

background-color

Die Hintergrundfarbe im Hexadezimalformat des Satzindikators.

Beispiel: So richten Sie einen Indikator mit einem weißen Hintergrund ein:

.s7zoomviewer .s7setindicator { 
 background-color: #FFFFFF; 
}

Das Erscheinungsbild eines einzelnen Datensatzindikatorpunkts wird mit der CSS-Klassenauswahl gesteuert:

.s7zoomviewer .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:

.s7zoomviewer .s7setindicator .s7dot { 
 width:15px; 
 height:15px; 
 margin-left:2px; 
 margin-top:5px; 
 margin-right:2px; 
 margin-bottom:1px; 
 border-radius:12px; 
 background-color:#D5D3D3;  
} 
.s7zoomviewer .s7setindicator .s7dot[state="selected"] { 
 background-color:#939393;  
}

Auf dieser Seite