Sidvy page-view
Huvudvyn består av katalogbilden. Den kan svepas för att komma till en annan sida eller zoomas.
CSS-egenskaper för huvudvisningsområdet
Visningsområdets utseende styrs av följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7pageview
Exempel - för att göra huvudvyn genomskinlig.
.s7ecatalogsearchviewer .s7pageview {
background-color: transparent;
}
På datorer har komponenten stöd för cursortype attributväljare som kan tillämpas på .s7pageview och styr typen av markör baserat på komponentens tillstånd och användaråtgärder. Följande cursortype värden stöds:
Den sidavgränsare som visuellt skiljer de vänstra och högra sidorna i det kataloguppslaget styrs med följande CSS-klassväljare:
.s7ecatalogsearchviewer .s7pageview .s7pagedivider
Exempel - Om du vill ha en 40 pixlar bred sidavgränsare med halvgenomskinlig bild.
.s7ecatalogsearchviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
frametransition modifieraren är inställd på turn eller auto (på stationära datorer) styrs siddelarens utseende av pageturnstyle modifierare och .s7pagedivider CSS-klassen ignoreras.Det går att konfigurera visningen av anpassade musmarkörer över huvudvisningsområdet. Den här funktionen styrs med ytterligare attributväljare tillämpade på .s7ecatalogsearchviewer .s7pageview CSS-klass:
Exempel - ha olika musmarkörer för varje typ av komponentläge.
.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;
}