Panneau des résultats de la recherche

Le panneau des résultats de la recherche se compose de la zone d’entrée de la recherche en haut et de la zone principale dans laquelle s’affichent les messages d’information ou les résultats de la recherche.

Propriétés CSS de la zone de visualisation principale

Lorsque le panneau est principal, l’interface utilisateur du lecteur est recouverte d’un remplissage semi-transparent. La couleur et l’opacité de ce remplissage sont contrôlées à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7searchpanel .s7backoverlay

Propriété CSS

Description

arrière-plan-couleur

Couleur de l’incrustation.

opacité

Opacité de la couleur.

Le panneau des résultats de la recherche occupe toujours toute la hauteur de visionneuse disponible. Cependant, vous pouvez configurer la largeur. Vous pouvez définir la largeur sur une valeur en pixels absolus, ce qui est un paramètre par défaut pour les points d’arrêt de taille moyenne et grande. Vous pouvez également définir la largeur sur 100 % pour que le panneau des résultats de la recherche occupe l’intégralité de la zone de visualisation. La largeur du panneau est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

Propriété CSS de l’espace de résultats de la recherche

width

Largeur de l’espace de résultats de la recherche.

Exemple : pour configurer un panneau de résultats de recherche de 250 pixels de large sur des points d’arrêt de taille large et moyenne et utiliser un panneau de taille réelle sur un point d’arrêt de taille réduite :

.s7ecatalogsearchviewer.s7size_large .s7searchpanel .s7searchresultspanel, .s7ecatalogsearchviewer.s7size_medium .s7searchpanel .s7searchresultspanel { 
 width:250px; 
} 
.s7ecatalogsearchviewer.s7size_small .s7searchpanel .s7searchresultspanel { 
 width:100%; 
}

La partie supérieure du panneau des résultats de la recherche est consacrée à la zone d’entrée de la recherche. Le remplissage sur les côtés de la zone de saisie est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

Propriétés CSS du conteneur d’entrée de recherche

remplissage

Marge intérieure autour de la zone de saisie.

Le champ de saisie de recherche est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

Propriétés CSS du champ de saisie de la recherche

height

Hauteur du champ de saisie de la recherche.

remplissage-gauche

Marge intérieure entre les limites du champ de saisie et le texte de saisie.

bordure

Bordure du champ de saisie de la recherche.

margin

Marge du champ de saisie de la recherche

font-size

Taille de la police de texte.

Exemple - pour configurer un champ de saisie de recherche avec une hauteur de 0 pixel et une police de texte de 14 pixels :

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput { 
 padding-left:5px; 
 height:30px; 
 font-size:14px; 
}

Le bouton de recherche situé à gauche du champ de saisie de la recherche sous la forme du "miroir" par défaut est contrôlé par le sélecteur de classe CSS suivant :

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

Propriétés CSS du bouton d’entrée de recherche

width

Largeur du bouton d’entrée de recherche.

hauteur

Hauteur du bouton d’entrée de recherche.

image d’arrière-plan

URL de l’icône "en forme de verre".

taille d’arrière-plan

Taille de l'icône "en verre".

bordure

Bordure du bouton d’entrée de recherche.

marge

Marge du bouton d’entrée de recherche.

Exemple - pour configurer un bouton de recherche avec une icône "en verre" de 26 x 26 pixels ; Taille de 30 pixels avec bordure de 1 pixel :

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton { 
 width:30px; 
 height:30px; 
 background-size:26px 26px; 
 background-image: url(images/v2/Search_form_field.png); 
 font-size:14px; 
 border: 1px solid #696969; 
}

Le panneau des résultats de la recherche peut afficher une invite textuelle lors du premier appel de la fonction. Il affiche également un message à l’utilisateur lorsque sa recherche n’a retourné aucun résultat. Dans tous les cas, le texte apparaît dans la partie principale du panneau des résultats de la recherche et est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

Propriétés CSS des informations de recherche

color

Couleur du texte.

font-family

Nom de la police de texte.

font-align

Alignement horizontal du texte.

font-size

Taille du texte de la police.

REMARQUE

Ce panneau de texte prend en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents styles à différents messages texte. En particulier, state='prompt' correspond à l’invite de texte affichée lorsque le panneau est appelé pour la première fois ; state='results' correspond au texte contenant des informations sur les accès à la recherche ; et state='no_results' correspond au texte affiché lorsque la requête de recherche ne renvoyait aucun résultat.

Le texte du message peut être localisé. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple - pour configurer un panneau de texte qui utilise une police grise de 18 pixels :

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo { 
 font-size: 18px; 
 color: #696969; 
}

Les résultats de la recherche sont affichés sous la forme d’une seule colonne ou d’une seule ligne de miniatures pour les pages avec accès à la recherche. L’espacement entre les miniatures des résultats de la recherche est contrôlé à l’aide du sélecteur de classe CSS suivant :

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

Propriétés CSS des cellules de miniature

marge

Taille de la marge verticale autour de chaque miniature. L’espacement réel des miniatures correspond à la somme des marges supérieure et inférieure définies pour .s7thumbcell .

Exemple - pour configurer l’espacement de 10 pixels :

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell { 
 margin: 5px; 
}

L’aspect des miniatures individuelles est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

Propriétés CSS de la miniature

width

Largeur de la miniature.

hauteur

Hauteur de la miniature.

bordure

Bordure de la miniature.

Exemple : pour configurer des miniatures de 215 x 129 pixels, avec une bordure par défaut gris clair et une bordure sélectionnée gris foncé :

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb { 
 width: 215px; 
 height: 129px; 
}

L’aspect du libellé de la miniature est contrôlé à l’aide du sélecteur de classe CSS suivant :

 .s7ecatalogsearchviewer 
.s7searchpanel .s7swatches .s7label

Propriétés CSS du libellé

color

Couleur du texte.

font-family

Nom de la police de texte.

font-size

Taille de la police de texte.

Exemple - pour configurer des libellés qui utilisent une police Helvetica de 12 pixels, grise, grise :

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7label { 
 font-family: Helvetica,sans-serif; 
 color: #4c4c4c; 
 font-size: 12px; 
}

Sur les systèmes qui utilisent la saisie de la souris, deux boutons de défilement s’affichent au bas du panneau des résultats de la recherche pour permettre à l’utilisateur de faire défiler les résultats de la recherche. L’aspect des boutons de défilement vers le haut et vers le bas est contrôlé par les sélecteurs de classe CSS suivants :

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton 
.s7ecatalogsearchviewer .s7searchpanel .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. Au lieu de cela, la logique du lecteur les positionne automatiquement.

Propriétés CSS des boutons de défilement vers le haut et vers le bas

width

Largeur du bouton de défilement.

hauteur

Hauteur du bouton de défilement.

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 le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages aux états de bouton "up", "down", "over" et "disabled".

Les info-bulles des boutons peuvent être localisées. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : pour configurer un bouton de défilement vers le haut de 125 x 35 pixels et dont l’illustration est différente pour chaque état :

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton { 
 width:125px; 
 height:35px; 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='up'] { 
 background-image:url(images/sdk/searchpanel_scroll_up_up.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='over'] { 
 background-image:url(images/sdk/searchpanel_scroll_up_over.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='down'] { 
 background-image:url(images/sdk/searchpanel_scroll_up_down.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='disabled'] { 
 background-image:url(images/sdk/searchpanel_scroll_up_disabled.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton { 
 width:125px; 
 height:35px; 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='up'] { 
 background-image:url(images/sdk/searchpanel_scroll_down_up.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='over'] { 
 background-image:url(images/sdk/searchpanel_scroll_down_over.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='down'] { 
 background-image:url(images/sdk/searchpanel_scroll_down_down.png); 
} 
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='disabled'] { 
 background-image:url(images/sdk/searchpanel_scroll_down_disabled.png);

Sur cette page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now