Indicator instellen set-indicator

De indicator Set is een reeks punten die boven op hoofdstalen worden weergegeven wanneer een viewer wordt gebruikt op een aanraakapparaat. Met de puntjes kunnen gebruikers door pagina's met miniaturen navigeren wanneer er geen schuifknoppen beschikbaar zijn.

CSS-eigenschappen van de setindicator

De vormgeving van de setindicatorcontainer wordt beheerd met de volgende CSS-klassenkiezer:

.s7mixedmediaviewer .s7setindicator
CSS-eigenschap
Beschrijving
background-color
De achtergrondkleur in hexadecimale notatie van de setindicator.

Voorbeeld - Een setindicator met een witte achtergrond maken:

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

De vormgeving van een individuele set-indicator punt wordt bepaald door de CSS-klassenkiezer:

.s7mixedmediaviewer .s7setindicator .s7dot

CSS-eigenschap
Beschrijving
width
Breedte van punt van indicator instellen.
height
Hoogte van punt van de ingestelde indicator.
margin-left
Linkermarge in pixels.
margin-top
Bovenmarge in pixels.
marge-rechts
Rechtermarge in pixels.
margin-bottom
Ondermarge in pixels.
border-radius
Randstraal in pixels.
background-color
Achtergrondkleur in hexadecimale notatie.
NOTE
Punt van indicator instellen ondersteunt de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende miniatuurtoestanden. Met name: state="selected" komt overeen met de huidige pagina met miniaturen, state="unselected" komt overeen met de standaardpuntstatus.

Voorbeeld - Als u een setindicatorpunt van 15 x 15 pixels wilt maken met een horizontale marge van twee pixels, een bovenliggende pixelmarge, een ondermarge van één pixel, een straal van 12 pixels, een standaardkleur van #D5D3D3 en een actieve kleur van #939393:

.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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8