Vista de la página page-view
La vista principal consiste en la imagen del catálogo. Se puede deslizar para llegar a otra página o ampliar.
Propiedades CSS del área del visor principal
El aspecto del área de visualización se controla con el siguiente selector de clase CSS:
.s7ecatalogsearchviewer .s7pageview
Ejemplo: para hacer transparente la vista principal.
.s7ecatalogsearchviewer .s7pageview {
background-color: transparent;
}
En sistemas de escritorio, el componente admite el cursortype
selector de atributos que se puede aplicar a .s7pageview
y controla el tipo de cursor en función del estado del componente y la acción del usuario. Lo siguiente cursortype
se admiten estos valores:
El divisor de páginas que separa visualmente las páginas izquierda y derecha del pliego de catálogos se controla con el siguiente selector de clases CSS:
.s7ecatalogsearchviewer .s7pageview .s7pagedivider
Ejemplo: Tener un divisor de página de 40 píxeles de ancho con imagen semitransparente.
.s7ecatalogsearchviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
frametransition
El modificador se ha definido en turn
o auto
(en sistemas de escritorio), el aspecto del divisor de página se controla con la variable pageturnstyle
y el modificador .s7pagedivider
Se omite la clase CSS.Es posible configurar la visualización de los cursores personalizados del ratón sobre el área principal del visor. Esta capacidad se controla con los selectores de atributos adicionales aplicados a .s7ecatalogsearchviewer .s7pageview
Clase CSS:
Por ejemplo: tenga diferentes cursores de ratón para cada tipo de estado de componente.
.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;
}