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 le sélecteur d’attributs cursortype qui peut être appliqué à la classe .s7pageview et contrôle le type de curseur en fonction de l’état du composant et de l’action de l’utilisateur. Les valeurs cursortype suivantes 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 cette variable 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 le modificateur frametransition 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 du modificateur pageturnstyle et la classe CSS .s7pagedivider est ignorée.

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

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