helskärmsknapp
Skapat för:
- Utvecklare
- Användare
Med den här knappen aktiverar eller inaktiverar användaren helskärmsläget. Den här knappen visas inte om visningsprogrammet fungerar i popup-läge och systemet inte stöder helskärmsläge. Du kan ändra storlek, skal och position för knappen med hjälp av CSS.
CSS-egenskaper för huvudvisningsområdet
Knappens utseende styrs med följande CSS-klassväljare:
.s7spinviewer .s7fullscreenbutton
CSS-egenskap | Beskrivning |
---|---|
övre | Placera från den övre kanten, inklusive utfyllnad. |
höger | Placera från den högra kanten, inklusive utfyllnad. |
kvar | Placera från den vänstra kanten, inklusive utfyllnad. |
nederkant | Placera från den nedre kanten, inklusive utfyllnad. |
width | Knappens bredd. |
height | Knappens höjd. |
background-image | Bilden som visas för ett visst knappläge. |
background-position |
Placera inuti en teckningssprite, om CSS-sprites används. Se CSS-fragment. |
state
och selected
som kan användas för att tillämpa olika skal på olika knapplägen. selected='true'
motsvarar i synnerhet helskärmsläget och selected='false'
motsvarar normalläget.Knappens funktionsbeskrivning kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.
Exempel - För att ställa in en helskärmsknapp som är 32 x 32 pixlar och placerad sex pixlar från den övre och högra kanten av visningsprogrammet. Och slutligen, visar en annan bild för vart och ett av de fyra olika knapplägena när det är markerat eller inte markerat:
.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); }
}