Suchergebnisbereich

Das Suchergebnisbedienfeld besteht aus dem Sucheingabefeld oben und dem Hauptbereich, in dem Informationsmeldungen oder Suchergebnisse angezeigt werden.

CSS-Eigenschaften des Haupt-Viewer-Bereichs

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

.s7ecatalogviewer .s7searchpanel .s7backoverlay

CSS-Eigenschaft

Beschreibung

background-color

Farbe der Überlagerung.

Deckkraft

Deckkraft der Farbe.

Das Suchergebnisbedienfeld belegt immer die gesamte verfügbare Viewer-Höhe. Sie können jedoch die Breite konfigurieren. Sie können die Breite auf einen absoluten Pixelwert einstellen, der eine Standardeinstellung für Breakpoints mittlerer und großer Größe ist. Alternativ können Sie die Breite auf 100 % festlegen, damit der Suchergebnisbereich den gesamten Viewer-Bereich einnimmt. Die Bereichsbreite wird durch den folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

CSS-Eigenschaft des Suchergebnisbereichs

width

Breite des Suchergebnisbereichs.

Beispiel: Um ein Suchergebnisbedienfeld mit einer Breite von 250 Pixel für große und mittelgroße Breakpoints einzurichten, verwenden Sie 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%; 
}

Oben im Suchergebnisbereich befindet sich das Sucheingabefeld. Der Abstand auf den Seiten des Eingabefelds wird durch die folgende CSS-Klassenauswahl gesteuert:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

CSS-Eigenschaften des Sucheingabecontainers

Padding

Auffüllung um das Eingabefeld.

Das Eingabefeld für die Suche wird durch den folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

CSS-Eigenschaften des Sucheingabefelds

height

Höhe des Sucheingabefelds.

padding-left

Der innere Abstand zwischen dem Eingabefeldbereich und dem Eingabetext.

rand

Rand des Sucheingabefelds.

margin

Rand des Sucheingabefelds

Schriftgröße

Größe der Textschriftart.

Beispiel: Zum Einrichten eines Sucheingabefelds mit 0 Pixel Höhe und 14 Pixel Textschrift:

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

Die Suchschaltfläche links neben dem Sucheingabefeld in Form des standardmäßig "Look-glass"wird durch den folgenden CSS-Klassenselektor gesteuert:

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

CSS-Eigenschaften der Sucheingabeschaltfläche

width

Breite der Sucheingabeschaltfläche.

height

Höhe der Sucheingabeschaltfläche.

background-image

Die URL zum "Look-glass"-Symbolbild.

background-size

Die Größe des Symbols "Aussehendes Glas".

rand

Rand der Sucheingabeschaltfläche.

margin

Rand der Sucheingabeschaltfläche.

Beispiel: Zum Einrichten einer Suchschaltfläche mit einem 26 x 26 Pixel "Look glass"-Symbol. 30 Pixel mit einem Rahmen von 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; 
}

Im Suchergebnisbereich wird möglicherweise eine Textaufforderung angezeigt, wenn die Funktion zum ersten Mal aufgerufen wird. Er zeigt dem Benutzer auch eine Nachricht an, wenn bei seiner Suche keine Ergebnisse zurückgegeben wurden. In allen Fällen wird Text im Hauptteil des Bedienfelds für Suchergebnisse angezeigt und über die folgende CSS-Klassenauswahl gesteuert:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

CSS-Eigenschaften der Suchinformationen

color

Textfarbe.

Schriftfamilie

Name der Textschriftart.

font-align

Horizontale Textausrichtung.

Schriftgröße

Schriftgröße.

HINWEIS

Dieser Textbereich unterstützt die Attributauswahl state, mit der verschiedene Stile auf verschiedene Textnachrichten angewendet werden können. Insbesondere state='prompt' entspricht der Textaufforderung, die angezeigt wird, wenn das Bedienfeld zum ersten Mal aufgerufen wird. state='results' entspricht dem Text mit Informationen zu Suchtreffern; und state='no_results' dem Text entspricht, der angezeigt wird, wenn die Suchanfrage keine Ergebnisse zurückgegeben hat.

Der Nachrichtentext kann lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen.

Beispiel: Zum Einrichten eines Textfelds, das eine graue 18-Pixel-Schriftart verwendet:

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

Suchergebnisse werden als einzelne Spalte oder einzelne Zeile von Miniaturansichten für Seiten mit Suchtreffern gerendert. Der Abstand zwischen den Miniaturansichten der Suchergebnisse wird mit der folgenden CSS-Klassenauswahl gesteuert:

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

CSS-Eigenschaften der Miniaturansichtszellen

margin

Die Größe des vertikalen Rands um jede Miniaturansicht. Der tatsächliche Abstand der Miniaturansichten entspricht der Summe der oberen und unteren Ränder, die für .s7thumbcell festgelegt wurden.

Beispiel - zum Einrichten eines 10-Pixel-Abstands:

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

Das Erscheinungsbild einzelner Miniaturansichten wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

CSS-Eigenschaften der Miniaturansicht

width

Breite der Miniaturansicht.

height

Höhe der Miniaturansicht.

rand

Rand der Miniaturansicht.

Beispiel: Zum Einrichten von Miniaturansichten mit 215 x 129 Pixel, einem hellgrauen Standardrahmen und einem dunkelgrauen ausgewählten Rahmen:

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

Das Erscheinungsbild der Miniaturansichtsbeschriftung wird mit der folgenden CSS-Klassenauswahl gesteuert:

 .s7ecatalogsearchviewer 
.s7searchpanel .s7swatches .s7label

CSS-Eigenschaften der Bezeichnung

color

Textfarbe.

Schriftfamilie

Name der Textschriftart.

Schriftgröße

Größe der Textschriftart.

Beispiel - zum Einrichten von Beschriftungen mit 12 Pixel, Grau, Helvetica-Schriftart:

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

Auf Systemen, die die Mauseingabe verwenden, werden unten im Suchergebnisbereich zwei Bildlauftasten angezeigt, um durch die Suchergebnisse zu blättern. Das Erscheinungsbild der Bildlaufschaltflächen nach oben und unten wird mithilfe der folgenden CSS-Klassenselektoren gesteuert:

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

Es ist nicht möglich, Bildlaufschaltflächen mithilfe der CSS-Eigenschaften oben, links, unten und rechts zu positionieren. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.

CSS-Eigenschaften der Schaltflächen zum Bildlauf nach oben und unten

width

Breite der Bildlaufschaltfläche.

height

Höhe der Bildlaufschaltfläche.

background-image

Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird.

background-position

Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden.

Siehe auch CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt die Attributauswahl state, mit der verschiedene Skins auf die Schaltflächenzustände "up", "down", "over" und "disabled" angewendet werden können.

Die QuickInfos für Schaltflächen können lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen.

Beispiel: Um eine Bildlaufschaltfläche mit 125 x 35 Pixel einzurichten, die für jeden Status unterschiedliche Grafiken enthält:

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

Auf dieser Seite