DocumentatieReferentiehandleiding voor Dynamic Media Viewers

Knop Miniaturen thumbnails-button

Last update: Thu Dec 09 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • Developer
  • User

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 hoofdviewergebied

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.
achtergrondafbeelding
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 beide state en 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' komt overeen met de standaardstaat met de hoofdweergave.

De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen 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