DocumentatieReferentiehandleiding voor Dynamic Media Viewers

Paginaweergave page-view

Last update: Fri Dec 10 2021 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 hoofdviewergebied

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

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

Voorbeeld - om de hoofdweergave transparant te maken.

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

Op desktopsystemen ondersteunt de component de cursortype kenmerkkiezer waarop kan worden toegepast .s7pageview klasse en bestuurt het type van de curseur die op componentenstaat en gebruikersactie wordt gebaseerd. Het 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.
zoomine
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.
dia
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:

.s7ecatalogsearchviewer .s7pageview .s7pagedivider

CSS-eigenschap
Beschrijving
width
De breedte van de paginascheiding. Instellen op 0 px om de verdeler volledig te verbergen.
achtergrondafbeelding
De afbeelding die u als scheidingsteken voor de pagina wilt gebruiken.

Voorbeeld - Als u een scheidingsteken voor 40 pixels breed pagina wilt maken met een halftransparante afbeelding.

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

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

CSS-eigenschap
Beschrijving
default
Normaal gesproken wordt een pijl weergegeven voor een afbeelding waarop niet kan worden ingezoomd.
zoomine
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
dia
Hiermee wordt getoond wanneer de gebruiker een afbeelding omwisselt met gebruik van diabeweging

Voorbeeld: gebruik verschillende muiscursors voor elk type componentstatus.

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