Barre de contrôle principale main-control-bar

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

Sur les téléphones mobiles, il conserve toujours les vignettes, la table des matières, les boutons Télécharger, Imprimer, Favoris, Social partager, plein écran et Fermer. Toutefois, les boutons Première page et Dernière page, ainsi que l’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 est affichée en haut de la zone de la visionneuse sur les systèmes de bureau et les téléphones mobiles, et déplacée vers le bas de la zone de la visionneuse sur les tablettes. Prend toujours toute la largeur disponible de la visionneuse. Il est possible de modifier sa couleur, sa hauteur et sa position verticale dans le CSS par rapport au conteneur de la visionneuse.

L’apparence de la barre de contrôle principale est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7controlbar

Exemple : pour configurer une barre de contrôle principale grise de 36 pixels de haut 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 en option. Il est activé si la largeur de la visionneuse est trop petite et qu’il n’y a pas assez d’espace pour tenir tous les boutons prédéfinis dans la barre de contrôle. Dans ce cas, un bouton fléché à deux états apparaît 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. Le principal cas d’utilisation de cette fonctionnalité concerne 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 est 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

Le bouton de défilement est ajouté à un élément conteneur spécial qui positionne correctement le bouton. Il 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 au cas où la hauteur du bouton de défilement serait inférieure à la hauteur de la barre de contrôle.

L’apparence de ce conteneur de boutons de défilement est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7controlbar .s7scrollbuttoncontainer

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

L’aspect de ce bouton est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7controlbar .s7scrollleftrightbutton

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 commande principale pour les téléphones mobiles. Et, 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 sélectionné :

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