DocumentatieNaslaggids voor dynamische mediasviewers

Knop Miniaturen thumbnails-button

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • Ontwikkelaar
  • Gebruiker

Als u deze knop selecteert of erop tikt, schakelt u de viewer tussen de hoofdweergave en de miniaturen. Deze knop wordt weergegeven in de hoofdbesturingsbalk. U kunt deze knop vergroten, verkleinen, verkleinen en plaatsen met CSS.

CSS eigenschappen van het belangrijkste viewergebied

De vormgeving van de knop wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogviewer .s7thumbnailpagebutton

CSS-eigenschap
Beschrijving
margin-top
De verschuiving vanaf de bovenkant van de besturingsbalk.
margin-left
De afstand aan de volgende knoop op de linkerzijde, of de linkerkant van de controlebar, als het de eerste knoop in een rij is.
width
Breedte van de knop.
height
Hoogte van de knop.
background-image
De afbeelding die voor een bepaalde knopstatus wordt weergegeven.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS Sprites.

NOTE
Deze knop ondersteunt zowel de state - als selected -kenmerkkiezers, die kunnen worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden. Met name selected='true' komt overeen met de viewerstatus wanneer de miniatuurmodus actief is en selected='false' overeenkomt met de standaardstatus bij de hoofdweergave.

De knopinfo kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​ voor meer informatie.

Voorbeeld - Aan opstellings duimnagelknoop die 28 x 28 pixel is en 4 pixel van de bodem en 5 pixel van de linkerrand van de belangrijkste controlebar wordt geplaatst. En ten slotte wordt voor elk van de vier verschillende knoptoestanden een andere afbeelding weergegeven wanneer deze is geselecteerd of niet.

.s7ecatalogviewer .s7thumbnailpagebutton{
margin-top: 4px;
margin-left: 5px; width:28px;
 height:28px;
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='false'][state='up'] {
background-image:url(images/v2/ThumbnailPageButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='false'][state='over'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='false'][state='down'] {
background-image:url(images/v2/ThumbnailPageButton_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='false'][state='disabled'] {
background-image:url(images/v2/ThumbnailPageButton_dark_disabled.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='true'][state='up'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='true'][state='over'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='true'][state='down'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='true'][state='disabled'] {
background-image:url(images/v2/ThumbnailPageButton_dark_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8