Barre de contrôle principale

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

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. Cependant, 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 visualisation sur les ordinateurs de bureau et les téléphones mobiles, puis est déplacée vers le bas de la zone de visualisation sur tablettes. Elle prend toujours la largeur de visionneuse disponible en entier. Il est possible de modifier sa couleur, sa hauteur et sa position verticale dans la page CSS, par rapport au conteneur de la visionneuse.

L’aspect de la barre de contrôle principale est contrôlé par le 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. Elle est activée si la largeur de la visionneuse est trop petite et si l’espace disponible ne permet pas de placer tous les boutons prédéfinis dans la barre de contrôle. Dans ce cas, une flèche à deux états s’affiche sur le côté droit 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 périphériques mobiles dotés de petits écrans en orientation portrait constituent le Principal exemple d’utilisation de cette fonctionnalité.

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 fonction est activée et désactivée à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7controlbar .s7innercontrolbarcontainer

Propriété CSS

Description

position

Si 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 vous 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 si la hauteur du bouton de défilement est inférieure à la hauteur de la barre de contrôle.

L’aspect de ce conteneur de bouton 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 habiller le bouton de défilement lui-même au moyen de 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.

hauteur

Hauteur du bouton.

image d’arrière-plan

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

arrière-plan-position

Positionnez l’objet à l’intérieur de 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'attribut state et selected, qui peuvent être utilisés pour appliquer différents habillages à différents états de bouton. state="selected" correspond en particulier à 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 du 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, et pour configurer 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