Vista de la página

La vista principal consiste en la imagen del catálogo. Se puede realizar un barrido 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:

.s7ecatalogviewer .s7pageview

Ejemplo: para que la vista principal sea transparente.

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

En los sistemas de escritorio, el componente admite el selector de atributos cursortype que se puede aplicar a la clase .s7pageview y controla el tipo del cursor en función del estado del componente y la acción del usuario. Se admiten los siguientes valores cursortype:

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:

.s7ecatalogviewer .s7pageview .s7pagedivider

Ejemplo: para tener un separador de página de 40 píxeles de ancho con una imagen semitransparente.

.s7ecatalogviewer .s7pageview .s7pagedivider { 
 width:40px; 
 background-image:url(images/sdk/divider.png); 
}

Es posible configurar la visualización de los cursores personalizados del ratón sobre el área del visor principal. Esto se controla con los selectores de atributos adicionales aplicados a la clase CSS .s7ecatalogviewer .s7pageview:

Ejemplo: tiene diferentes cursores de ratón para cada tipo de estado del componente.

.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; 
}