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 mittlere und große Breakpoints 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: So richten Sie eine Suchschaltfläche mit einem 26 x 26 Pixel "Look-glass"-Symbol ein. 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. 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 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 state -Attributauswahl, die verwendet werden kann, um verschiedene Stile auf verschiedene Textnachrichten anzuwenden. Insbesondere state='prompt' entspricht der Textaufforderung, die angezeigt wird, wenn das Bedienfeld zum ersten Mal aufgerufen wird. Die state='results' entspricht dem Text mit Informationen zu Suchtreffern. Und schließlich die state='no_results' entspricht dem Text, der angezeigt wird, wenn die Suchanfrage keine Ergebnisse zurückgegeben hat.

Der Nachrichtentext kann lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche 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 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 .

Beispiel - So richten Sie einen Abstand von zehn Pixeln ein:

.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: Um Miniaturansichten mit 215 x 129 Pixel einzurichten, weisen einen hellgrauen Standardrahmen und einen dunkelgrauen ausgewählten Rahmen auf:

.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 - So richten Sie Beschriftungen ein, die 12 Pixel, grau, Helvetica®-Schriftart verwenden:

.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 state -Attributauswahl, die verwendet werden kann, um verschiedene Skins auf "up", "down", "over"und "disabled" Schaltflächenstatus.

Die QuickInfos für Schaltflächen können lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.

Beispiel - So richten Sie eine Bildlaufschaltfläche ein, die 125 x 35 Pixel groß ist und 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);

Auf dieser Seite