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 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 hoofdviewergebied
De vormgeving van de knop wordt bepaald door de volgende CSS-klassenkiezer:
.s7basiczoomviewer .s7fullscreenbutton
Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.
Zie CSS-sprites.
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 toestand “Volledig scherm” en selected='false' komt overeen met de toestand “normaal”.De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .
Voorbeeld - om een knop voor volledig scherm in te stellen met een resolutie van 32 x 32 pixels en zes pixels vanaf de boven- en rechterrand van de viewer. Er moet een andere afbeelding worden weergegeven voor elk van de vier verschillende knoptoestanden, indien geselecteerd of niet geselecteerd:
.s7basiczoomviewer .s7fullscreenbutton {
top:6px;
right:6px;
width:32px;
height:32px;
}
.s7basiczoomviewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7basiczoomviewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7basiczoomviewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7basiczoomviewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7basiczoomviewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7basiczoomviewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7basiczoomviewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7basiczoomviewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}