Page vue

La vue principale se compose de l’image du catalogue. Il peut être glissé pour accéder à une autre page ou agrandi.

Propriétés CSS de la zone de visionneuse principale

L’aspect de la zone d’affichage est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7pageview

propriété CSS

Description

arrière-plan-couleur

Couleur d’arrière-plan de la vue principale au format hexadécimal.

cursor

Curseur affiché au-dessus de la vue principale.

Exemple : pour rendre la vue principale transparente.

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

Sur les systèmes de bureau, le composant prend en charge la variable cursortype sélecteur d’attributs qui peut être appliqué à .s7pageview et contrôle le type du curseur en fonction de l’état du composant et de l’action de l’utilisateur. Les éléments suivants cursortype sont prises en charge :

Valeur

Description

par défaut

S’affiche lorsque l’image n’est pas agrandie en raison d’une petite résolution d’image, de paramètres de composant ou des deux.

zoomin

S’affiche lorsque l’image peut être agrandie.

réinitialiser

S’affiche lorsque l’image atteint le niveau de zoom maximal et peut être réinitialisée à l’état initial.

glisser

Affiché lorsque l’utilisateur effectue un panoramique sur l’image agrandie.

diapositive

Affiché lorsque l’utilisateur effectue un changement d’image en effectuant un glissement ou un clic horizontal.

Le séparateur de page qui sépare visuellement les pages gauche et droite de l’étendue du catalogue est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7pageview .s7pagedivider

propriété CSS

Description

width

Largeur du séparateur de page. Définissez sur . 0 px pour masquer complètement le séparateur.

background-image

Image que vous souhaitez utiliser comme séparateur de page.

Exemple : pour un séparateur de page de 40 pixels de large avec une image semi-transparente.

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

Lorsque la variable frametransition le modificateur est défini sur turn ou auto (sur les systèmes de bureau), l’aspect du séparateur de page est contrôlé à l’aide de la fonction pageturnstyle et le .s7pagedivider La classe CSS est ignorée.

Il est possible de configurer l’affichage des curseurs de souris personnalisés sur la zone de visionneuse principale. Cette fonctionnalité est contrôlée avec les sélecteurs d’attributs supplémentaires appliqués à .s7ecatalogsearchviewer .s7pageview Classe CSS :

propriété CSS

Description

par défaut

Normalement, une flèche s’affiche pour une image non zoomable.

zoomin

Indique à quel moment une image peut être agrandie.

réinitialiser

Indique si une image atteint le zoom maximal et peut être réinitialisée.

glisser

Affiche le moment où l’utilisateur effectue une opération de glisser sur l’image agrandie

diapositive

Affiche le moment où l’utilisateur effectue le changement d’image à l’aide d’un mouvement de diapositives

Exemple : utilisez des curseurs de souris différents pour chaque type d’état de composant.

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

Sur cette page