DocumentationGuide de référence des visionneuses Dynamic Media

Page vue page-view

Last update: Fri Aug 15 2025 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 zoomé.

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

L’aspect de la zone d’affichage est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7pageview
Propriété CSS
Description
couleur d’arrière-plan
Couleur d’arrière-plan de la vue principale au format hexadécimal.
curseur
Curseur affiché sur le dessus de la fenêtre principale.

Exemple - pour rendre la vue principale transparente.

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

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

Valeur
Description
faire défaut
Affiché lorsque l’image n’est pas zoomable en raison d’une résolution d’image réduite, des paramètres de composant, ou les deux.
Zoom avant
S’affiche lorsque l’image peut être zoomée.
réinitialisation
S’affiche lorsque l’image est au niveau de zoom maximal et peut être réinitialisée à l’état initial.
traîner
S’affiche lorsque l’utilisateur effectue un panoramique de l’image avec zoom.
glisser
S’affiche lorsque l’utilisateur permute d’image par balayage horizontal ou effleurement.

Le séparateur de page qui sépare visuellement les pages gauche et droite de la planche du catalogue est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7pageview .s7pagedivider

Propriété CSS
Description
Largeur
Largeur du séparateur de page. Définissez le séparateur sur 0 px.
image d’arrière-plan
Image que vous souhaitez utiliser comme séparateur de page.

Exemple : avoir 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 frametransition modificateur est défini sur turn ou auto (sur les ordinateurs de bureau), l’apparence du séparateur de page est contrôlée par le pageturnstyle modificateur et la .s7pagedivider classe CSS est ignorée.

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

Propriété CSS
Description
faire défaut
Normalement, une flèche s’affiche pour les images non zoomables.
Zoom avant
Indique les moments où une image peut être zoomée.
réinitialisation
Indique quand une image atteint le zoom maximal et peut être réinitialisée.
traîner
Indique quand l’utilisateur effectue une opération de glissement sur l’image avec un zoom avant
glisser
Indique lorsque l’utilisateur permute l’image à l’aide d’un mouvement de glissement

Exemple : avoir 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