DocumentatieNaslaggids voor dynamische mediasviewers

schermvullende knop full-screen-button

Last update: Fri Aug 15 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • Ontwikkelaar
  • Gebruiker

Met deze knop activeert de gebruiker de modus Volledig scherm of wordt deze afgesloten wanneer deze door de gebruiker is geselecteerd. Deze knop wordt niet weergegeven als de viewer werkt in de pop-upmodus en het systeem geen native volledig scherm ondersteunt. 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:

.s7spinviewer .s7fullscreenbutton
CSS-eigenschap
Beschrijving
top
Positie vanaf de bovenrand, inclusief opvulling.
right
Positie vanaf de rechterrand, inclusief opvulling.
left
Positie vanaf de linkerrand, inclusief opvulling.
bottom
Positie vanaf de onderrand, inclusief opvulling.
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 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. selected='true' komt met name overeen met de status “Volledig scherm” en selected='false' komt overeen met de status “Normaal”.

De knopinfo kan worden gelokaliseerd. Zie Localisatie van gebruikersinterfaceelementenvoor meer informatie.

Voorbeeld - Een knop voor volledig scherm van 32 x 32 pixels instellen en zes pixels van de boven- en rechterrand van de viewer plaatsen. En ten slotte wordt voor elk van de vier verschillende knoptoestanden een andere afbeelding weergegeven wanneer deze is geselecteerd of niet is geselecteerd:

.s7spinviewer .s7fullscreenbutton {
top:6px;
right:6px;
width:32px;
height:32px;
}
.s7spinviewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7spinviewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7spinviewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7spinviewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7spinviewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7spinviewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7spinviewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7spinviewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8