Dokumentation Referenshandbok för Dynamic Media Viewer

Innehållsförteckning table-of-contents

Last update: Fri Dec 10 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

Developer
User

Innehållsförteckningen är en knapp i huvudkontrollfältet. När den är aktiverad visas en nedrullningsbar panel med en lista över sidindex och etiketter.

Baserat på konfigurationen kan listan innehålla alla sidor som finns i katalogen eller endast de sidor som har explicit definierade etiketter. Om listan är längre än de tillgängliga skärmutrymmena visas en rullningslist till höger i datorsystem.

Placeringen och storleken på innehållsförteckningsknappen i visningsprogrammets användargränssnitt styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7tableofcontents

CSS-egenskaper för innehållsförteckningen

marginal-top

Förskjutningen från kontrollfältets överkant.

marginal-vänster

Avståndet till nästa knapp till vänster eller till vänster om kontrollfältet om den här knappen är den första i en rad.

width

Bredden på innehållsförteckningsknappen.

height

Höjden på innehållsförteckningsknappen.

background-image

Bilden 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 har stöd för state attributväljare, som kan användas för att tillämpa olika skal på olika knapplägen.

Knappens funktionsbeskrivning kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.

Exempel - Ställ in en innehållsförteckningsknapp som är placerad 4 pixlar från nederkanten och 43 pixlar från vänster om huvudkontrollfältet. Storleken är 28 x 28 pixlar och olika bilder visas för vart och ett av de fyra olika knapplägena:

.s7ecatalogsearchviewer .s7tableofcontents {
margin-top: 4px;
margin-left: 10px; width: 28px;
 height: 28px;
}
.s7ecatalogsearchviewer .s7tableofcontents[state='up'] {
background-image:url(images/v2/TableOfContents_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='over'] {
background-image:url(images/v2/TableOfContents_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='down'] {
background-image:url(images/v2/TableOfContents_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='disabled'] {
background-image:url(images/v2/TableOfContents_dark_disabled.png);
}

Utseendet på den nedrullningsbara panelen styrs av följande CSS-klassväljare:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel

CSS-egenskaper för den nedrullningsbara panelen

background-color

Bakgrundsfärg i den nedrullningsbara panelen.

marginal

Intern förskjutning mellan panelgränserna och innehållet.

box-shadow

Skugga runt panelen.

NOTE

Det går inte att styra storleken eller placeringen av den nedrullningsbara panelen från CSS. komponenten hanterar sin layout programmatiskt.

Exempel - ställ in en nedrullningsbar panel som har en halvgenomskinlig svart bakgrund, en marginal på 5 pixlar runt innehållet och en skugga:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel {
 background-color: rgba(0, 0, 0, 0.5);
 margin: 5px;
 box-shadow: 2px 2px 3px #c0c0c0;
}

Det enskilda objektets utseende och känsla styrs med följande CSS-klassväljare:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item

CSS-egenskaper för objektet

font-family

Teckensnittsnamn.

font-size

Teckenstorlek.

height

Objektets höjd.

utfyllnad

Intern utfyllnad.

NOTE

Listruteobjektet har stöd för state attributväljare, som kan användas för att tillämpa olika skal på hovring och valda objektlägen.

Exempel - skapa ett nedrullningsbart objekt med ett Helvetica®-teckensnitt med 14 pixlar och 19 pixlar högt. Ett objekt har en mörkgrå bakgrund på hovring och en ljusgrå bakgrund när det är markerat:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item {
font-family: Helvetica,sans-serif;
font-size: 14px;
height: 19px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="over"] {
background-color: rgb(102, 102, 102);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="selected"] {
background-color: rgb(178, 178, 178);
}

Ett element som visar sidindexet styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index

CSS-egenskaper för sidindexet

min-width

Minsta elementbredd.

max-width

Maximal elementbredd.

utfyllnad höger

Avstånd mellan sidindexet och sidetiketten.

NOTE

Du kan dölja sidindexet helt genom att ange display:none för s7index CSS-klass.

Exempel 1 - ställ in ett sidindex med en minsta bredd på 40 pixlar, en maximal bredd på 70 pixlar och en marginal på 5 pixlar till höger:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index {
max-width: 70px;
min-width: 40px;
padding-right: 5px;
}

Exempel 2 - dölj sidindex:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index {
display: none;
}

Sideetiketten styrs med följande CSS-klassväljare:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label

CSS-egenskaper för sidetiketten

min-width

Minsta elementbredd.

max-width

Maximal elementbredd.

Exempel - ställ in ett sidindex med en minsta bredd på 40 pixlar och en maximal bredd på 240 pixlar:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label {
min-width: 40px;
max-width: 240px;
}

Om det finns fler objekt än vad som får plats lodrätt i den nedrullningsbara panelen - och systemet är ett skrivbord - återges en lodrät rullningslist till höger på panelen. Utseendet på rullningslistområdet styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar

CSS-egenskaper för rullningslisten

width

Bredden på rullningslisten.

top

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

nederkant

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

höger

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

Exempel - ställ in en rullningslist som är 28 pixlar bred och som inte har någon marginal för panelens övre, högra eller nedre del:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar {
 top:0px;
 bottom:0px;
 right:0px;
 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:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

CSS-egenskaper för rullningsspåret

width

Spårbredden.

background-color

Bakgrundsfärgen för spåret.

Exempel - ställ in ett rullningslistspår som är 28 pixlar brett och har en halvgenomskinlig grå bakgrund:

.s7ecatalogsearchviewer .s7tableofcontents .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 av komponentlogiken. Höjden på tummen ändras dock inte dynamiskt beroende på mängden innehåll. Du kan konfigurera tumhöjden och andra aspekter med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

CSS-egenskaper för rullningslistens reglage

width

Miniatyrbredden.

height

Tumthöjden.

padding-top

Den lodräta utfyllnaden mellan spårets överkant.

padding-bottom

Den lodräta utfyllnaden mellan spårets 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 state attributväljaren, som kan användas för att tillämpa olika skal på up, down, overoch disabled tumlägen.

Exempel - Ställ 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:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb {
 width:28px;
 background-repeat:no-repeat;
 background-position:center;
 height:45px;
 padding-top:10px;
 padding-bottom:10px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='up'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='down'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='over'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .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:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton

Det går inte att placera rullningsknapparna med CSS top, left, bottomoch right egenskaper, i stället placerar visningsprogramlogiken dem automatiskt.

CSS-egenskaper för knappen för rullning uppåt och nedåt

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 även CSS-fragment.

NOTE

Button har stöd för state attributväljaren, som kan användas för att tillämpa olika skal på up, down, overoch disabled knapplägen.

Knappens funktionsbeskrivning kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.

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

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

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8