Barre de contrôle principale

La barre de contrôle principale est la zone rectangulaire des ordinateurs de bureau et des tablettes qui contiennent tous les contrôles de l’interface utilisateur (à l’exception des boutons Grande page) disponibles pour la visionneuse de recherche eCatalog.

Sur les téléphones mobiles, il conserve toujours les boutons Miniatures, Table des matières, Télécharger, Imprimer, Favoris, Partage sur les réseaux sociaux, Plein écran et Fermer. Toutefois, les boutons Première page et Dernière page et Indicateur de page sont supprimés de la barre de contrôle principale et ajoutés à la barre de contrôle secondaire à la place. Par défaut, la barre de contrôle principale s’affiche en haut de la zone de la visionneuse sur les ordinateurs de bureau et les téléphones mobiles, et est déplacée vers le bas de la zone de visionneuse sur les tablettes. Elle prend toujours la largeur totale de la visionneuse disponible. Il est possible de modifier sa couleur, sa hauteur et sa position verticale dans le CSS, par rapport au conteneur de la visionneuse.

L’aspect de la barre de contrôle principale est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7controlbar

propriété CSS

Description

haut

Position à partir du haut de la visionneuse.

bas

Position à partir du bas de la visionneuse.

height

Hauteur de la barre de contrôle principale.

arrière-plan-couleur

Couleur d’arrière-plan de la barre de contrôle principale.

Exemple : pour configurer une barre de contrôle principale grise de 36 pixels et positionnée en haut du conteneur de la visionneuse.

.s7ecatalogsearchviewer .s7controlbar { 
 top: 0px; 
 height: 36px; 
 background-color: rgba(0, 0, 0, 0.5); 
}

La barre de contrôle principale prend en charge une fonction de défilement facultative. Cette option est activée si la largeur de la visionneuse est trop petite et qu’il n’y a pas assez d’espace pour que tous les boutons prédéfinis de la barre de contrôle s’adaptent. Dans ce cas, une flèche à deux états s’affiche dans la partie droite de la barre de contrôle. Cliquez ou appuyez sur ce bouton pour faire défiler tous les éléments de la barre de contrôle vers la gauche ou vers la droite, selon l’état du bouton de défilement. Les Principaux cas d’utilisation de cette fonctionnalité sont les appareils mobiles avec de petits écrans en orientation portrait.

La fonction de défilement est activée pour la barre de contrôle principale et désactivée pour la barre de contrôle secondaire. La fonctionnalité est activée et désactivée à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7controlbar .s7innercontrolbarcontainer

propriété CSS

Description

position

Lorsqu’elle est définie sur statique , la fonction de défilement est désactivée.

Définissez cette propriété sur absolu pour activer la fonction de défilement.

Le bouton de défilement est ajouté à un élément de conteneur spécial qui positionne correctement le bouton et permet de mettre en forme la zone autour du bouton différemment du reste de l’arrière-plan de la barre de contrôle, au cas où la hauteur du bouton de défilement serait inférieure à la hauteur de la barre de contrôle.

L’aspect de ce conteneur de boutons de défilement est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7controlbar .s7scrollbuttoncontainer

propriété CSS

Description

width

Normalement, doit être égal ou supérieur à la largeur du bouton de défilement lui-même.

arrière-plan-couleur

Couleur d’arrière-plan du conteneur.

Vous pouvez dimensionner et appliquer un habillage au bouton de défilement lui-même au moyen d’une feuille CSS.

L’aspect de ce bouton est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7controlbar .s7scrollleftrightbutton

propriété CSS

Description

width

Largeur du bouton.

height

Hauteur du bouton.

background-image

Image affichée pour un état de bouton donné.

arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi CSS Sprites .

REMARQUE

Ce bouton prend en charge les sélecteurs d’attributs state et selected, qui peuvent être utilisés pour appliquer différents habillages à différents états de bouton. En particulier, state="selected" correspond à l’état initial du bouton de défilement lorsqu’il est possible de faire défiler le contenu de la barre de contrôle vers la gauche ; state="default" correspond à l’état lorsque le contenu est défilé jusqu’à la gauche et que le bouton de défilement suggère de le renvoyer à l’état initial.

L’info-bulle de bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : pour activer la fonction de défilement dans la barre de contrôle principale pour les téléphones mobiles, configurez un bouton de défilement de 64 x 64 pixels qui affiche une image différente pour chacun des 4 états de bouton différents lorsqu’il est sélectionné ou non :

.s7ecatalogsearchviewer.s7size_small .s7controlbar .s7innercontrolbarcontainer { 
 position: absolute; 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollbuttoncontainer { 
 width:64px; 
 background-color: rgb(0, 0, 0); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton { 
 width:64px; 
 height:64px; 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='up'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_up_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='over'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_over_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='down'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_down_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='disabled'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_disabled_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='up'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_up_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='over'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_over_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='down'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_down_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='disabled'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_disabled_touch.png); 
}

Sur cette page