Dokumentation Referenshandbok för Dynamic Media Viewer

Miniatyrbilder

Senast uppdaterad: 22 juli 2024

Ämnen:

Skapat för:

Utvecklare
Användare

Miniatyrbilder består av ett rutnät med miniatyrbilder med en valfri rullningslist till höger för att tillåta lodrät rullning.

Miniatyrbilder växlas genom att du klickar på miniatyrknappen i huvudkontrollfältet. När miniatyrbilder är aktiva visas de i modalt läge ovanpå visningsprogrammets användargränssnitt. Visningslogiken ändrar automatiskt storlek på miniatyrbehållaren till hela visningsområdet.

Utseendet på behållaren för miniatyrbilder styrs med följande CSS-klassväljare:

.s7ecatalogviewer .s7thumbnailgridview

CSS-egenskap	Beskrivning
övre	Den lodräta förskjutningen för miniatyrbehållaren från visningsprogrammets överkant.
marginal-top	Den övre marginalen.
marginal-vänster	Den vänstra marginalen.
marginal-right	Rätt marginal.
marginal-bottom	Den undre marginalen.
background-color	Bakgrundsfärgen för miniatyrbildområdet.

Exempel - för att ställa in att miniatyrbilder ska ha 32 pixlar förskjutning från överkanten, 5 pixelmarginaler till vänster och höger och 8 pixlars marginal längst ned, med 0xDDDDDD bakgrund.

.s7ecatalogviewer .s7thumbnailgridview {
 top: 32px;
 margin-left: 5px;
 margin-right: 5px;
 margin-bottom: 8px;
 background-color: rgb(221, 221, 221);
}

Avståndet mellan miniatyrbilder styrs med följande CSS-klassväljare:

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell

CSS-egenskap	Beskrivning
marginal	Storleken på den vågräta och lodräta marginalen runt varje miniatyrbild. Det faktiska vågräta mellanrummet för miniatyrbilder är lika med summan av den vänstra och högra marginalen som är inställd för .s7miniatyrcell . Lodrätt mellanrum för miniatyrbilder är lika med summan av den övre och den nedre marginalen.

Exempel - om du vill ange ett 10 pixlar stort utrymme både lodrätt och vågrätt.

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell {
 margin: 5px;
}

Utseendet på enskilda miniatyrbilder styrs med följande CSS-klassväljare:

.s7ecatalogviewer .s7thumbnailgridview .s7thumb

CSS-egenskap	Beskrivning
width	Miniatyrbildens bredd.
height	Miniatyrbildens höjd.
kant	Miniatyrens kantlinje.
background-color	Miniatyrbildens bakgrundsfärg.

När visningsprogrammet roterar till stående läge på pekenheter kan det ändra storlek på miniatyrbilderna till hälften av vad som är konfigurerat om det skulle bestämma sig för att dela upp kataloguppslaget på enskilda sidor.

NOTE

Miniatyrbilden stöder attributväljaren state som kan användas för att tillämpa olika skal på olika miniatyrlägen. I synnerhet motsvarar state="selected" miniatyrbilden för den bild som visas i huvudvyn, state="default" motsvarar resten av miniatyrbilderna och state="over" används vid hovring med musen.

Exempel - Om du vill ställa in miniatyrbilder som är 120 x 85 pixlar har du en vit bakgrund, en ljusgrå standardkant och en mörkgrå markerad kant.

.s7ecatalogviewer .s7thumbnailgridview .s7thumb {
 width:120px;
 height:85px;
 background-color: rgb(255, 255, 255);
 border: solid 1px #999999;
}
.s7ecatalogviewer .s7thumbnailgridview .s7thumb[state="selected"]{
 border: solid 2px #666666;
}

Utseendet på miniatyrbildetiketten styrs av följande CSS-klassväljare:

.s7ecatalogviewer .s7thumbnailgridview .s7label

CSS-egenskap

Beskrivning

font-family

Typsnittsnamn.

font-size

Teckenstorlek.

Exempel - för att ställa in etiketter så att de använder 14 pixlar Helvetica®-teckensnitt.

.s7ecatalogviewer .s7thumbnailgridview .s7label {
 font-family: Helvetica,sans-serif;
 font-size: 12px;
}

Om det finns fler miniatyrbilder än vad som får plats lodrätt i vyn återges den lodräta rullningslisten på höger sida av miniatyrbilder. Utseendet på rullningslistområdet styrs med följande CSS-klassväljare:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar

CSS-egenskap

Beskrivning

width

Bredden på rullningslisten.

övre

Den lodräta rullningslistens förskjutning från miniatyrbildsområdets överkant.

nederkant

Den lodräta rullningslistens förskjutning från miniatyrbildsområdets nederkant.

höger

Den vågräta rullningslistens förskjutning från miniatyrbildens högra kant.

Exempel - om du vill ställa in en rullningslist som är 28 pixlar bred och har en 8-pixelmarginal upptill höger och nedtill i miniatyrbildområdet.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar {
 top:8px;
 bottom:8px;
 right:8px;
 width:28px;
}

Rullningslistens spår är området mellan den övre och den nedre rullningsknappen. Komponenten ställer automatiskt in spårets position och höjd. Spåret styrs med följande CSS-klassväljare:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

CSS-egenskap

Beskrivning

width

Bredden på rullningslistens spår.

background-color

Bakgrundsfärgen för rullningslistens spår.

Exempel - för att ställa in ett rullningslistspår som är 28 pixlar brett och har en halvgenomskinlig grå bakgrund.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

Rullningslistens reglage rör sig lodrätt inom rullningsspårets område. Dess lodräta position styrs helt av komponentlogiken, men tumhöjden ändras inte dynamiskt beroende på mängden innehåll. Miniatyrhöjden och andra aspekter styrs med följande CSS-klassväljare:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSS-egenskap

Beskrivning

width

Bredden på rullningslistens reglage.

height

Höjden på rullningslistens miniatyrbild.

-utfyllnadspunkt

Den lodräta utfyllnaden mellan rullningslistens överkant.

utfyllnad-nederkant

Den lodräta utfyllnaden mellan rullningslistens nederkant.

background-image

Bilden som visas för ett givet tumläge.

background-position

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

Se även CSS-fragment.

NOTE

Tummen har stöd för attributväljaren state, som kan användas för att tillämpa olika skal på tumlägena up, down, over och disabled.

Exempel - om du vill ställa in en rullningslist som är 28 x 45 pixlar, har 10 pixelmarginaler högst upp och längst ned och har olika teckningar för varje läge.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb {
 width:28px;
 background-repeat:no-repeat;
 background-position:center;
 height:45px;
 padding-top:10px;
 padding-bottom:10px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}

Utseendet på de övre och nedre rullningsknapparna styrs av följande CSS-klassväljare:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

Det går inte att placera rullningsknapparna med CSS-egenskaperna top, left, bottom och right. I stället placerar visningsprogramlogiken dem automatiskt.

CSS-egenskap

Beskrivning

width

Knappens bredd.

height

Knappens höjd.

background-image

Bilden som visas för ett givet tumläge.

background-position

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

Se även CSS-fragment.

NOTE

Dessa knappar har stöd för attributväljaren state som kan användas för att tillämpa olika skal på de olika knapplägena up, down, over och disabled.

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

Exempel - för att ställa in rullningsknappar som är 28 x 32 pixlar och har olika teckningar för varje läge.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}

recommendation-more-help