Paginaweergave page-view
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:
.s7ecatalogviewer .s7pageview
Voorbeeld - om de hoofdweergave transparant te maken.
.s7ecatalogviewer .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:
De paginascheidingslijn die de linker- en rechterpagina van de catalogusspread visueel van elkaar scheidt, wordt bestuurd met de volgende CSS-klassenkiezer:
.s7ecatalogviewer .s7pageview .s7pagedivider
Voorbeeld - voor een scheidingslijn van 40 pixels breed met een halftransparante afbeelding.
.s7ecatalogviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
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 functionaliteit wordt beheerd met de extra kenmerkkiezers die worden toegepast op .s7ecatalogviewer .s7pageview
CSS-klasse:
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;
}