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

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 :

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

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

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 :

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