schermvullende knop full-screen-button
Hiermee gaat de viewer naar de modus Volledig scherm of wordt deze afgesloten wanneer deze door de gebruiker is geselecteerd. Deze knop wordt weergegeven in de hoofdbesturingsbalk. Deze knop wordt niet weergegeven als de viewer werkt in de pop-upmodus en het systeem geen ondersteuning biedt voor een native volledig scherm. U kunt de grootte, de huid, en de plaats van de knoop door CSS.
CSS eigenschappen van het belangrijkste viewergebied
De vormgeving van de knop wordt bepaald door de volgende CSS-klassenkiezer:
.s7ecatalogsearchviewer .s7fullscreenbutton
Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.
Zie ook CSS Sprites.
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 gebruikersinterfaceelementen voor meer informatie.
Voorbeeld - Een knop voor volledig scherm instellen van 28 x 28 pixels en een positie 4 pixels vanaf de onderrand en 5 pixels vanaf de rechterrand van de hoofdbesturingsbalk. En ten slotte wordt voor elk van de vier verschillende knoptoestanden een andere afbeelding weergegeven wanneer deze is geselecteerd of niet.
.s7ecatalogsearchviewer .s7fullscreenbutton {
bottom:4px;
right:5px;
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}