DocumentatieNaslaggids voor dynamische mediasviewers

Inhoudsopgave table-of-contents

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • Ontwikkelaar
  • Gebruiker

De inhoudsopgave is een knop op de hoofdbesturingsbalk. Als u deze optie inschakelt, wordt een vervolgkeuzelijst weergegeven met een lijst met pagina-indexen en labels.

Gebaseerd op de configuratie, kan de lijst alle pagina's bevatten die in de catalogus aanwezig zijn of slechts die pagina's die expliciete vastgestelde etiketten hebben. Op desktopsystemen wordt rechts een schuifbalk weergegeven als de lijst langer is dan de beschikbare ruimte op het scherm.

De positie en grootte van de knop met de inhoudsopgave in de gebruikersinterface van de viewer worden bepaald met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7tableofcontents

CSS eigenschappen van de inhoudstafel

margin-top
De verschuiving vanaf de bovenkant van de besturingsbalk.
margin-left
De afstand tot de volgende knoop op de linkerzijde, of de linkerkant van de controlebar als deze knoop eerste in een rij is.
width
De breedte van de knop voor de inhoudsopgave.
height
De hoogte van de knop voor de inhoudsopgave.
background-image
De afbeelding die voor een bepaalde knopstatus wordt weergegeven.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS Sprites.

NOTE
Deze knop ondersteunt de kenmerkenkiezer van state , die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.

De knopinfo kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​ voor meer informatie.

Voorbeeld - Opstelling een knoop van de inhoudstafel die 4 pixel van de bodem en 43 pixel van de linkerzijde van de belangrijkste controlebar wordt geplaatst. De grootte is 28 x 28 pixels en er wordt een andere afbeelding weergegeven voor elk van de vier verschillende knopstatussen:

.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);
}

De vormgeving van het vervolgkeuzemenu wordt bepaald door de volgende CSS-klassenkiezer:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel

CSS eigenschappen van het drop-down paneel

background-color
Achtergrondkleur van vervolgkeuzelijst.
margin
Interne verschuiving tussen de deelvenstergrenzen en de inhoud.
box-shadow
Slagschaduw rond het deelvenster.
NOTE
Het is niet mogelijk om de grootte of de positie van het vervolgkeuzepaneel vanuit CSS te bepalen. De component beheert de lay-out programmatisch.

Voorbeeld - stel een vervolgkeuzelijst in met een halftransparante zwarte achtergrond, een marge van 5 pixels rondom de inhoud en een slagschaduw:

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

De vormgeving van de afzonderlijke items wordt bepaald door de volgende CSS-klassenkiezer:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item

CSS eigenschappen van het punt

font-family
Fontnaam.
font-size
Tekengrootte.
height
Hoogte van item.
padding
Interne opvulling.
NOTE
Vervolgkeuzelijstitem ondersteunt de kenmerkenkiezer state , die kan worden gebruikt om verschillende skins toe te passen op de aanwijsstatus en de geselecteerde itemstatus.

Voorbeeld: stel een vervolgkeuzelijst in met een Helvetica®-lettertype van 14 pixels en een hoogte van 19 pixels. Een item heeft een donkergrijze achtergrond op de muisaanwijzer en een lichtgrijze achtergrond als dit is geselecteerd:

.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);
}

Een element dat de pagina-index weergeeft, wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index

CSS eigenschappen van de pagina index

min-width
Minimale breedte van element.
max-width
Maximale breedte van element.
padding-right
Afstand tussen de pagina-index en het paginalabel.
NOTE
U kunt de pagina-index volledig verbergen door display:none in te stellen voor de CSS-klasse s7index .

Voorbeeld 1 - stel een pagina-index in met een minimale breedte van 40 pixels, een maximale breedte van 70 pixels en een marge van 5 pixels aan de rechterkant:

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

Voorbeeld 2 - pagina-index verbergen:

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

Het paginalabel wordt beheerd met de volgende CSS-klassenkiezer:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label

CSS eigenschappen van het paginalabel

min-width
Minimale breedte van element.
max-width
Maximale breedte van element.

Voorbeeld - stel een pagina-index in met een minimale breedte van 40 pixels en een maximale breedte van 240 pixels:

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

Als er meer items zijn dan verticaal in het vervolgkeuzevenster kunnen worden geplaatst - en het systeem is een bureaublad -, wordt er aan de rechterkant van het deelvenster een verticale schuifbalk weergegeven. De vormgeving van het gebied van de schuifbalk wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar

CSS eigenschappen van scrollbar

width
De breedte van de schuifbalk.
top
De verticale verschuiving van de schuifbalk ten opzichte van de bovenkant van het deelvenstergebied.
bottom
De verticale verschuiving van de schuifbalk ten opzichte van de onderkant van het deelvenstergebied.
right
De verschuiving van de horizontale schuifbalk ten opzichte van de rechterrand van het deelvenstergebied.

Voorbeeld - stel een schuifbalk in die 28 pixels breed is en geen marge heeft voor het boven-, rechter- of ondergebied van het deelvenster:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar {
 top:0px;
 bottom:0px;
 right:0px;
 width:28px;
}

Schuifbalktrack is het gebied tussen de bovenste en onderste schuifknop. De component stelt automatisch de positie en de hoogte van het spoor in. De track wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

CSS eigenschappen van het rolspoor

width
De spoorbreedte.
background-color
De achtergrondkleur van de track.

Voorbeeld - stel een schuifbalkvak in met een breedte van 28 pixels en een halftransparante grijze achtergrond:

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

Het schuifbalkblokje verplaatst zich verticaal binnen het gebied van het schuifvak. De verticale positie wordt bepaald door de componentlogica. De hoogte van het blokje verandert echter niet dynamisch, afhankelijk van de hoeveelheid inhoud. U kunt de duimhoogte en andere aspecten met de volgende CSS klassenselecteur vormen:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

CSS eigenschappen van het scrollbar duim

width
De breedte van het blokje.
height
De hoogte van de duim.
padding-top
De verticale opvulling tussen de bovenkant van de track.
padding-bottom
De verticale opvulling tussen de onderkant van de track.
background-image
De afbeelding die voor een bepaalde duimstatus wordt weergegeven.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS Sprites.

NOTE
Miniatuur ondersteunt de kenmerkenkiezer state , die kan worden gebruikt om verschillende skins toe te passen op de statussen up , down , over en disabled thumb.

Voorbeeld: stel een schuifbalkblokje in van 28 x 45 pixels, met een marge van 10 pixels boven en onder en met verschillende illustraties voor elk frame:

.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);
}

De vormgeving van de bovenste en onderste schuifknoppen wordt bepaald door de volgende CSS-klassekiezers:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton

Het is niet mogelijk om de schuifknoppen te positioneren met de CSS-eigenschappen top , left , bottom en right . In plaats daarvan worden ze automatisch geplaatst door de viewerlogica.

CSS eigenschappen van scroll omhoog en scroll onderaan knoop

width
De knopbreedte.
height
De knophoogte.
background-image
De afbeelding die voor een bepaalde knopstatus wordt weergegeven.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS Sprites.

NOTE
Button ondersteunt de state -kenmerkkiezer, die kan worden gebruikt om verschillende skins toe te passen op de knopstatussen up , down , over en disabled .

De knopinfo kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​ voor meer informatie.

Voorbeeld: stel schuifknoppen in met een resolutie van 28 x 32 pixels en een andere illustratie voor elke status:

.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