Suchergebnisbedienfeld search-results-panel

Das Suchergebnisbedienfeld besteht aus dem Eingabefeld für die Suche oben und dem Hauptbereich, in dem Informationsmeldungen oder Suchergebnisse angezeigt werden.

CSS-Eigenschaften des Haupt-Viewer-Bereichs

Wenn das Bedienfeld aktiv ist, wird die Benutzeroberfläche des Viewers mit einer halbtransparenten Füllung abgedeckt. Die Farbe und Deckkraft dieser Füllung wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogviewer .s7searchpanel .s7backoverlay

Das Suchergebnisfenster nimmt immer die gesamte verfügbare Viewer-Höhe ein. Sie können jedoch die Breite konfigurieren. Sie können die Breite auf einen absoluten Pixel-Wert festlegen, bei dem es sich um eine Standardeinstellung für Breakpoints mit mittlerer und großer Größe handelt. Sie können auch die Breite auf 100 % festlegen, damit das Suchergebnisbedienfeld den gesamten Viewer-Bereich einnimmt. Die Breite des Bedienfelds wird durch den folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

CSS-Eigenschaft des Suchergebnisbereichs

Beispiel : So richten Sie ein Suchergebnisbedienfeld mit einer Breite von 250 Pixel für große und mittelgroße Breakpoints ein und verwenden ein Bedienfeld mit voller Größe für einen kleinen Breakpoint:

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

Der obere Rand des Bedienfelds Suchergebnisse ist für das Sucheingabefeld vorgesehen. Der Abstand an den Seiten des Eingabefelds wird durch den folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

CSS-Eigenschaften des Sucheingabe-Containers

Das Sucheingabefeld wird durch den folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

CSS-Eigenschaften des Sucheingabefelds

Beispiel: So richten Sie ein Sucheingabefeld mit einer Höhe von 0 Pixel und einer Textschriftart von 14 Pixel ein:

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

Die Suchschaltfläche links neben dem Sucheingabefeld in Form des „Lookglass“ wird standardmäßig durch die folgende CSS-Klassenauswahl gesteuert:

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

CSS-Eigenschaften der Sucheingabe-Schaltfläche

Beispiel: So richten Sie eine Suchschaltfläche mit einem „Look-Glass“-Symbol mit 26 x 26 Pixeln ein: 30 Pixel groß mit einem 1-Pixel-Rahmen:

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

Das Suchergebnisfenster zeigt möglicherweise eine Eingabeaufforderung in Textform an, wenn die Funktion zum ersten Mal aufgerufen wird. Außerdem wird eine Meldung angezeigt, wenn die Suche eines Benutzers keine Ergebnisse zurückgegeben hat. In allen Fällen wird Text im Hauptteil des Suchergebnisbereichs angezeigt und durch den folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

CSS-Eigenschaften der Suchinformationen

Der Nachrichtentext kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel - So richten Sie ein Textfeld ein, das eine graue 18-Pixel-Schriftart verwendet:

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

Suchergebnisse werden für Seiten mit Suchtreffern als einzelne Spalte oder einzelne Miniaturansichtszeile gerendert. Der Abstand zwischen Suchergebnisminiaturen wird mit dem folgenden CSS-Klassenselektor gesteuert:

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

CSS-Eigenschaften der Miniaturbilderzellen

Beispiel - So richten Sie einen Zehn-Pixel-Abstand ein:

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

Das Erscheinungsbild einzelner Miniaturen wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

CSS-Eigenschaften der Miniatur

Beispiel: Für Miniaturen mit einer Größe von 215 x 129 Pixeln ist der Standardrahmen hellgrau und der ausgewählte Rahmen dunkelgrau:

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

Das Erscheinungsbild der Miniaturbildbeschriftung wird mit dem folgenden CSS-Klassenselektor gesteuert:

 .s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label

CSS-Eigenschaften der Bezeichnung

Beispiel - So richten Sie Beschriftungen ein, die die Schriftart 12 Pixel, Grau, Helvetica® verwenden:

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

Auf Systemen, die eine Mauseingabe verwenden, werden unten im Suchergebnisbereich zwei Bildlaufschaltflächen angezeigt, mit denen Benutzer durch die Suchergebnisse scrollen können. Die Darstellung der Bildlaufschaltflächen nach oben und unten wird mit den folgenden CSS-Klassenselektoren gesteuert:

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton

Scroll-Schaltflächen können nicht mit den CSS-Eigenschaften „oben“, „links“, „unten“ und „rechts“ positioniert werden. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.

CSS-Eigenschaften der Schaltflächen Nach oben und Nach unten

Die QuickInfos für die Schaltfläche können lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel: So richten Sie eine Scroll-Up-Schaltfläche mit einer Größe von 125 x 35 Pixel ein, die für jeden Status unterschiedliche Grafiken aufweist:

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