DocumentationGuide de référence des visionneuses Dynamic Media

Page vue page-view

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

Créé pour :

  • Développeur
  • Utilisateur ou utilisatrice

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 :

.s7ecatalogviewer .s7pageview
propriété CSS
Description
background-color
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.

.s7ecatalogviewer .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
default
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.
reset
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
S’affiche 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 de gauche et de droite de l’étendue du catalogue est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogviewer .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.

.s7ecatalogviewer .s7pageview .s7pagedivider {
 width:40px;
 background-image:url(images/sdk/divider.png);
}
NOTE
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. Cette fonctionnalité est contrôlée avec les sélecteurs d’attributs supplémentaires appliqués à la classe CSS .s7ecatalogviewer .s7pageview :

propriété CSS
Description
default
Normalement, une flèche s’affiche pour une image non zoomable.
zoomin
Indique à quel moment une image peut être agrandie.
reset
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.

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