Table des matières table-of-contents
La table des matières est un bouton situé dans la barre de contrôle principale. Une fois activé, un panneau déroulant s’affiche avec une liste d’index et de libellés de page.
Selon la configuration, la liste peut contenir toutes les pages présentes dans le catalogue ou uniquement les pages dont les libellés explicites sont définis. Sur les ordinateurs de bureau, si la liste est plus longue que l’écran disponible, une barre de défilement s’affiche à droite.
La position et la taille du bouton de la table des matières dans l’interface utilisateur de la visionneuse sont contrôlées avec le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7tableofcontents
Propriétés CSS de la table des matières
state, qui peut être utilisé pour appliquer différents habillages à différents états de bouton.L’info-bulle du bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.
Exemple - Configurez un bouton de table des matières positionné à 4 pixels du bas et à 43 pixels de la gauche de la barre de contrôle principale. La taille est de 28 x 28 pixels et une image différente s’affiche pour chacun des quatre états de bouton différents :
.s7ecatalogsearchviewer .s7tableofcontents {
margin-top: 4px;
margin-left: 10px; width: 28px;
height: 28px;
}
.s7ecatalogsearchviewer .s7tableofcontents[state='up'] {
background-image:url(images/v2/TableOfContents_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='over'] {
background-image:url(images/v2/TableOfContents_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='down'] {
background-image:url(images/v2/TableOfContents_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='disabled'] {
background-image:url(images/v2/TableOfContents_dark_disabled.png);
}
L’aspect du panneau déroulant est contrôlé avec le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7tableofcontents .s7panel
Propriétés CSS du panneau déroulant
Exemple - configurez un panneau déroulant avec un arrière-plan noir semi-transparent, une marge de 5 pixels autour du contenu et une ombre portée :
.s7ecatalogsearchviewer .s7tableofcontents .s7panel {
background-color: rgba(0, 0, 0, 0.5);
margin: 5px;
box-shadow: 2px 2px 3px #c0c0c0;
}
L’aspect individuel de l’élément est contrôlé par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item
Propriétés CSS de l’élément
state, qui peut être utilisé pour appliquer différents habillages aux états d'éléments sélectionnés et survolés.Exemple - configurez un élément déroulant avec une police Helvetica® de 14 pixels et de 19 pixels de hauteur. Un élément possède un arrière-plan gris foncé au survol et un arrière-plan gris clair lorsqu’il est sélectionné :
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item {
font-family: Helvetica,sans-serif;
font-size: 14px;
height: 19px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="over"] {
background-color: rgb(102, 102, 102);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="selected"] {
background-color: rgb(178, 178, 178);
}
Un élément qui affiche l’index de page est contrôlé avec le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index
Propriétés CSS de l’index de page
display:none pour la classe CSS s7index.Exemple 1 : configurez un index de page avec une largeur minimale de 40 pixels, une largeur maximale de 70 pixels et une marge de 5 pixels sur le côté droit :
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index {
max-width: 70px;
min-width: 40px;
padding-right: 5px;
}
Exemple 2 - masquage de l’index de page :
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index {
display: none;
}
Le libellé de la page est contrôlé avec le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label
Propriétés CSS du libellé de la page
Exemple - configurez un index de page avec une largeur minimale de 40 pixels et une largeur maximale de 240 pixels :
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label {
min-width: 40px;
max-width: 240px;
}
S’il y a plus d’éléments que ne peut en contenir verticalement dans le panneau déroulant (le système est un bureau), le composant affiche une barre de défilement verticale sur le côté droit du panneau. L’aspect de la zone de la barre de défilement est contrôlé par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar
Propriétés CSS de la barre de défilement
Exemple - configurez une barre de défilement de 28 pixels de large ne comportant pas de marge pour la zone supérieure, droite ou inférieure du panneau :
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar {
top:0px;
bottom:0px;
right:0px;
width:28px;
}
La piste de la barre de défilement est la zone située entre les boutons de défilement supérieur et inférieur. Le composant définit automatiquement la position et la hauteur de la piste. La piste est contrôlée avec le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolltrack
Propriétés CSS de la piste de défilement
Exemple - configurez une piste de barre de défilement de 28 pixels de large avec un arrière-plan gris semi-transparent :
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolltrack {
width:28px;
background-color:rgba(102, 102, 102, 0.5);
}
Le pouce de la barre de défilement se déplace verticalement dans la zone de piste de défilement. Sa position verticale est contrôlée par la logique du composant. Cependant, la hauteur du pouce ne change pas dynamiquement en fonction de la quantité de contenu. Vous pouvez configurer la hauteur du pouce et d’autres aspects avec le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb
Propriétés CSS du pouce de la barre de défilement
state, qui peut être utilisé pour appliquer différents habillages aux états up, down, over et disabled.Exemple - configurez une barre de défilement de 28 x 45 pixels avec des marges de 10 pixels en haut et en bas et des illustrations différentes pour chaque état :
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb {
width:28px;
background-repeat:no-repeat;
background-position:center;
height:45px;
padding-top:10px;
padding-bottom:10px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='up'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='down'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='over'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
L’aspect des boutons de défilement supérieur et inférieur est contrôlé avec les sélecteurs de classe CSS suivants :
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton
Il n’est pas possible de positionner les boutons de défilement à l’aide des propriétés CSS top, left, bottom et right ; à la place, la logique de la visionneuse les positionne automatiquement.
Propriétés CSS du bouton de défilement vers le haut et vers le bas
state, qui peut être utilisé pour appliquer différents habillages aux états de bouton up, down, over et disabled.L’info-bulle du bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.
Exemple : configurez des boutons de défilement de 28 x 32 pixels avec des illustrations différentes pour chaque état :
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}