Barre de contrôle principale main-control-bar
La barre de commande principale est la zone rectangulaire des ordinateurs de bureau et des tablettes qui contient toutes les commandes 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, Partager sur les réseaux sociaux, Plein écran et Fermer . Toutefois, les boutons Première page et Dernière page et 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 s’affiche en haut de la zone de la visionneuse sur les ordinateurs de bureau et les téléphones mobiles, et se déplace en bas de la zone de la visionneuse sur les tablettes. Il utilise toujours la largeur totale de 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é avec le sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7controlbar
Exemple - pour configurer une barre de contrôle principale grise de 36 pixels de haut placé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. Il est activé si la largeur de la visionneuse est trop faible et qu’il n’y a pas assez d’espace pour 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 la droite, selon l’état du bouton de défilement. Le principal cas d’utilisation 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 commande principale et désactivée pour la barre de commande secondaire. La fonction est activée et désactivée à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7controlbar .s7innercontrolbarcontainer
Lorsqu’elle est définie sur statique la fonction de défilement est désactivée.
Définissez cette propriété sur absolue 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. Il 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 à celle de la barre de contrôle.
L’aspect de ce conteneur de bouton de défilement est contrôlé avec le sélecteur de classe CSS suivant :
.s7ecatalogviewer .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 :
.s7ecatalogviewer .s7controlbar .s7scrollleftrightbutton
Positionnez à l’intérieur d’un sprite d’illustration si des sprites CSS sont utilisés.
Voir aussi desSprites CSS.
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. L’attribut state="default" correspond à l’état lorsque le contenu fait l’objet d’un défilement jusqu’à gauche et que le bouton de défilement suggère de le rétablir à 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 commande principale pour les téléphones mobiles. De plus, 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 :
.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);
}