Barre de contrôle principale main-control-bar

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 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. 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 :

.s7ecatalogviewer .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.

.s7ecatalogviewer .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. Le cas d’utilisation principal de cette fonctionnalité est celui des 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 :

.s7ecatalogviewer .s7controlbar .s7innercontrolbarcontainer

Le bouton de défilement est ajouté à un élément de 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 si la hauteur du bouton de défilement est inférieure à celle 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 :

.s7ecatalogviewer .s7controlbar .s7scrollbuttoncontainer

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 :

.s7ecatalogviewer .s7controlbar .s7scrollleftrightbutton

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 également un bouton de défilement de 64 x 64 pixels qui affiche une image différente pour chacun des quatre états de bouton différents lorsqu’il est sélectionné ou non :

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