Vue de page

La vue principale est constituée de l’image catalogue. Il peut être glissé pour atteindre une autre page ou faire l’objet d’un zoom.

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

L’aspect de la zone d’affichage est contrôlé par le 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.

curseur

Curseur affiché sur 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 du 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 ne peut pas faire l’objet d’un zoom en raison d’une résolution d’image réduite, de paramètres de composant ou des deux.

zoomine

S’affiche lorsque vous pouvez zoomer sur l’image.

réinitialiser

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

glisser

S’affiche lorsque l’utilisateur effectue un panoramique sur l’image dont l’état est zoomé.

diapositive

S’affiche lorsque l’utilisateur effectue une permutation d’image en effectuant un balayage horizontal ou un clic sur la souris.

Le séparateur de pages qui sépare visuellement les pages de gauche et de droite de la planche de catalogue est contrôlé par le 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.

image d’arrière-plan

Image à utiliser comme séparateur de page.

Exemple : pour avoir 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 pages est contrôlé avec le 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 visualisation 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 les images non zoomables.

zoomine

Indique à quel moment une image peut être zoomée.

réinitialiser

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

glisser

Indique le moment où l’utilisateur effectue une opération de glisser-déplacer sur un zoom dans l’image.

diapositive

Affiche le moment où l'utilisateur effectue un échange d'image à l'aide d'un mouvement de diapositive

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