Suchergebnisbedienfeld

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 Benutzeroberfläche des Viewers 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 nimmt immer die gesamte verfügbare Viewer-Höhe ein. Sie können die Breite jedoch konfigurieren. Sie können die Breite auf einen absoluten Pixelwert einstellen. Dies ist eine Standardeinstellung für Haltepunkte mittlerer und großer Größe. Oder Sie können die Breite auf 100 % einstellen, damit das Suchergebnisbedienfeld den gesamten Viewer-Bereich abdeckt. 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 an großen und mittelgroßen Haltepunkten einzurichten, verwenden Sie ein Bedienfeld mit voller Größe für einen kleinen Haltepunkt:

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

Der obere Bereich des Suchergebnisbedienfelds ist dem Sucheingabefeld gewidmet. Die Auffüllung an den Seiten des Eingabefelds wird durch den folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

CSS-Eigenschaften des Containers für die Sucheingabe

Padding

Auffüllung um das Eingabefeld.

Das Sucheingabefeld wird durch den folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

CSS-Eigenschaften des Sucheingabefelds

height

Höhe des Sucheingabefelds.

padding-left

Die innere Umrandung zwischen den Grenzen des Eingabefelds und dem Eingabetext.

rand

Rand des Sucheingabefelds.

margin

Rand des Sucheingabefelds

font-size

Größe der Textschriftart.

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

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

Die Suchschaltfläche links neben dem Sucheingabefeld in Form des "Aussehglases" wird standardmäßig von der folgenden CSS-Klassenauswahl 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 Symbol "Aussehen".

background-size

Die Größe des Symbols für "aussehendes Glas".

rand

Rand der Sucheingabeschaltfläche.

margin

Rand der Sucheingabeschaltfläche.

Beispiel: Zum Einrichten einer Suchschaltfläche mit dem Symbol "Aussehendes Glas"im Format 26 x 26 Pixel; 30 Pixel mit einem Rand 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 Suchergebnisbedienfeld wird möglicherweise eine Textaufforderung angezeigt, wenn die Funktion zum ersten Mal aufgerufen wird. Es zeigt dem Benutzer auch eine Meldung an, wenn die Suche keine Ergebnisse zurückgegeben hat. In allen Fällen wird Text im Hauptteil des Suchergebnisbedienfelds angezeigt und über die folgende CSS-Klassenauswahl gesteuert:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

CSS-Eigenschaften der Suchinformationen

color

Textfarbe.

font-family

Name der Textschriftart.

font-align

Horizontale Textausrichtung.

font-size

Schriftgröße.

HINWEIS

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

Der Nachrichtentext kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: Zum Einrichten eines Textfelds mit einer grauen 18-Pixel-Schrift:

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

Die Suchergebnisse werden für Seiten mit Suchtreffer als einzelne Spalte oder einzelne Zeile mit Miniaturansichten dargestellt. Der Abstand zwischen den Miniaturbildern der Suchergebnisse wird mit der folgenden CSS-Klassenauswahl gesteuert:

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

CSS-Eigenschaften der Miniaturansichtszellen

margin

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

Beispiel: So legen Sie einen Abstand von 10 Pixeln fest:

.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 Miniaturbildern mit 215 x 129 Pixel, einem hellgrauen Standardrand und einem dunkelgrauen Rahmen:

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

Die Darstellung der Miniaturansichtsbeschriftung wird mit der folgenden CSS-Klassenauswahl gesteuert:

 .s7ecatalogsearchviewer 
.s7searchpanel .s7swatches .s7label

CSS-Eigenschaften der Bezeichnung

color

Textfarbe.

font-family

Name der Textschriftart.

font-size

Größe der Textschriftart.

Beispiel: So richten Sie Beschriftungen ein, die eine 12-Pixel-Schrift, eine graue Schrift verwenden:

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

Auf Systemen, die die Mauseingabe verwenden, werden am unteren Rand des Suchergebnisbedienfelds zwei Bildlaufschaltflächen angezeigt, mit denen ein Benutzer durch die Suchergebnisse blättern kann. Das Erscheinungsbild der Schaltflächen für den Bildlauf nach oben und nach unten wird mithilfe der folgenden CSS-Klassenselektoren gesteuert:

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

Es ist nicht möglich, Bildlaufschaltflächen mit den CSS-Eigenschaften top, left, bottom und right zu positionieren. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.

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

width

Breite der Bildlaufschaltfläche.

height

Höhe der Bildlauftaste.

background-image

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

background-position

Position innerhalb des Bildausschnitt, 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 Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: Um eine Bildlaufschaltfläche einzurichten, die 125 x 35 Pixel groß ist und für jeden Status ein anderes Bildmaterial 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

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