DocumentaciónGuía de referencia de visores de Dynamic Media

Vista de la página page-view

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Temas:

Creado para:

  • Desarrollador
  • Usuario

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 de visor principal

El aspecto del área de visualización se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7pageview
Propiedad CSS
Descripción
color de fondo
Color de fondo de la vista principal en formato hexadecimal.
cursor
Cursor que se muestra sobre la vista principal.

Ejemplo: para hacer transparente la vista principal.

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

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

Valor
Descripción
predeterminado
Se muestra cuando la imagen no se puede ampliar debido a una resolución de imagen pequeña, a la configuración del componente o a ambas cosas.
zoom
Se muestra cuando se puede ampliar la imagen.
restableció
Se muestra cuando la imagen está en el nivel de zoom máximo y se puede restablecer al estado inicial.
arrastrar
Se muestra cuando el usuario desplaza la imagen cuyo estado se ha ampliado.
diapositiva
Se muestra cuando el usuario realiza un intercambio de imágenes realizando un barrido o un gesto horizontal.

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

Propiedad CSS
Descripción
ancho
Ancho del divisor de página. Definir en 0 píxeles para ocultar el divisor por completo.
imagen de fondo
La imagen que desea utilizar como divisor de página.

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);
}
NOTE
Cuando el modificador frametransition se establece en turn o auto (en sistemas de escritorio), el aspecto del divisor de páginas se controla con el modificador pageturnstyle y se omite la clase CSS .s7pagedivider.

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 la clase CSS .s7ecatalogsearchviewer .s7pageview:

Propiedad CSS
Descripción
predeterminado
Normalmente, una flecha muestra la imagen no ampliable.
zoom
Muestra cuándo se puede ampliar una imagen.
restableció
Muestra cuándo una imagen está en el zoom máximo y se puede restablecer.
arrastrar
Muestra cuándo el usuario realiza una operación de arrastre en una imagen ampliada
diapositiva
Muestra cuándo el usuario realiza un intercambio de imágenes mediante el gesto de diapositiva

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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8