Knappen Miniatyrbilder

Senast uppdaterad: 22 juli 2024
  • Ämnen:

Skapat för:

  • Utvecklare
  • Användare

Om du markerar eller trycker på den här knappen återställs visningsprogrammet mellan huvudvyn och miniatyrbilderna. Den här knappen visas i huvudkontrollfältet. 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:

.s7ecatalogviewer .s7thumbnailpagebutton

CSS-egenskapBeskrivning
marginal-topFörskjutningen från kontrollfältets överkant.
marginal-vänsterAvståndet till nästa knapp till vänster eller till vänster om kontrollfältet, om det är den första knappen på en rad.
widthKnappens bredd.
heightKnappens höjd.
background-imageBilden som visas för ett visst knappläge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se även CSS-fragment.

NOTE
Den här knappen stöder både attributväljarna state och selected som kan användas för att tillämpa olika skal på olika knapplägen. selected='true' motsvarar i synnerhet visningsprogrammets läge när miniatyrbildsläget är aktivt och selected='false' motsvarar standardläget med huvudvyn.

Knappens funktionsbeskrivning kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel - Om du vill ställa in en miniatyrknapp som är 28 x 28 pixlar och placerad 4 pixlar från nederkanten och 5 pixlar från den vänstra kanten av huvudkontrollfältet. Och slutligen, visar en annan bild för vart och ett av de fyra olika knapplägena när de är markerade eller inte markerade.

.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);
}
Föregående sidaMiniatyrbilder
Nästa sidaVerktygstips

Experience Manager