DocumentatieNaslaggids voor dynamische mediasviewers

Paginaweergave page-view

Last update: Fri Aug 15 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • Ontwikkelaar
  • Gebruiker

De hoofdweergave bestaat uit de catalogusafbeelding. U kunt een veeggebaar maken om naar een andere pagina te gaan of door te zoomen.

CSS eigenschappen van het belangrijkste viewergebied

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

.s7ecatalogviewer .s7pageview
CSS-eigenschap
Beschrijving
background-color
Achtergrondkleur van de hoofdweergave in hexadecimale notatie.
cursor
De cursor die over de hoofdweergave wordt weergegeven.

Voorbeeld: de hoofdweergave transparant maken.

.s7ecatalogviewer .s7pageview {
 background-color: transparent;
}

Op desktopsystemen ondersteunt de component de kenmerkenkiezer cursortype die op .s7pageview -klasse kan worden toegepast en bestuurt het type cursor op basis van componentstatus en gebruikersactie. De volgende cursortype -waarden worden ondersteund:

Waarde
Beschrijving
default
Wordt weergegeven wanneer op de afbeelding niet kan worden ingezoomd vanwege een kleine afbeeldingsresolutie, componentinstellingen of beide.
zoomin
Wordt weergegeven wanneer op de afbeelding kan worden ingezoomd.
reset
Wordt weergegeven wanneer de afbeelding zich op het maximale zoomniveau bevindt en kan worden teruggezet op de begintoestand.
slepen
Wordt weergegeven wanneer de gebruiker de afbeelding pant waarop is ingezoomd.
slide
Wordt weergegeven wanneer de gebruiker een afbeeldingswisseling uitvoert door een horizontale veegbeweging of tikken uit te voeren.

De paginascheidingslijn die de linker- en rechterpagina van de catalogusspread visueel van elkaar scheidt, wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogviewer .s7pageview .s7pagedivider

CSS-eigenschap
Beschrijving
width
De breedte van de paginascheiding. Stel in op 0 px om de scheidingslijn volledig te verbergen.
background-image
De afbeelding die u als scheidingsteken voor de pagina wilt gebruiken.

Voorbeeld - voor een scheidingslijn van 40 pixels breed met een halftransparante afbeelding.

.s7ecatalogviewer .s7pageview .s7pagedivider {
 width:40px;
 background-image:url(images/sdk/divider.png);
}
NOTE
Wanneer de optie frametransition is ingesteld op turn of auto (op desktopsystemen), wordt de weergave van de paginascheiding bepaald met de optie pageturnstyle en wordt de CSS-klasse .s7pagedivider genegeerd.

Het is mogelijk om de weergave van aangepaste muiscursors te configureren over het hoofdviewergebied. Deze functionaliteit wordt beheerd met de extra kenmerkkiezers die op de CSS-klasse .s7ecatalogviewer .s7pageview zijn toegepast:

CSS-eigenschap
Beschrijving
default
Normaal gesproken wordt een pijl weergegeven voor een afbeelding waarop niet kan worden ingezoomd.
zoomin
Hiermee kunt u zien wanneer op een afbeelding kan worden ingezoomd.
reset
Toont wanneer een beeld bij maximumgezoem is en kan worden teruggesteld.
slepen
Hiermee wordt getoond wanneer de gebruiker een sleepbewerking uitvoert op ingezoomde afbeeldingen
slide
Hiermee wordt getoond wanneer de gebruiker een afbeelding omwisselt met gebruik van diabeweging

Voorbeeld: gebruik verschillende muiscursors voor elk type componentstatus.

.s7ecatalogviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8