Sökresultatpanel search-results-panel

Sökresultatpanelen består av sökrutan högst upp och huvudområdet där informationsmeddelanden eller sökresultat visas.

CSS-egenskaper för huvudvisningsområdet

När panelen är aktiv visas visningsprogrammets användargränssnitt med en halvgenomskinlig fyllning. Färgen och opaciteten för den här fyllningen styrs med följande CSS-klassväljare:

.s7ecatalogviewer .s7searchpanel .s7backoverlay
CSS-egenskap
Beskrivning
background-color
Övertäckningens färg.
opacitet
Färgens opacitet.

Sökresultatpanelen upptar alltid alla tillgängliga höjder för visningsprogrammet. Du kan dock konfigurera bredden. Du kan ange bredden till ett absolut pixelvärde, vilket är standardinställningen för mellanstora och stora brytpunkter. Du kan också ange bredden till 100 % så att sökresultatpanelen upptar hela visningsområdet. Panelbredden styrs av följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

CSS-egenskap för sökresultatrymden

width
Bredden på sökresultatrymden.

Exempel - om du vill ställa in en 250 pixelbred sökresultatpanel på stora och medelstora brytpunkter och använda en panel i full storlek på en brytpunkt i liten storlek:

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

Den övre delen av sökresultatpanelen är avsedd för sökrutan. Utfyllnaden på inmatningsrutans sidor styrs av följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

CSS-egenskaper för sökindatabehållaren

utfyllnad
Utfyllnad runt inmatningsrutan.

Sökindatafältet styrs av följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

CSS-egenskaper för sökinmatningsfältet

height
Höjden på sökinmatningsfältet.
padding-left
Den inre utfyllnaden mellan inmatningsfältets gränser och inmatningstexten.
border
Kant för sökinmatningsfältet.
marginal
Marginal för sökinmatningsfältet
font-size
Textens storlek.

Exempel - för att ställa in ett sökinmatningsfält med 0 pixlar i höjd och 14 pixlar i teckensnitt:

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

Sökknappen till vänster om sökinmatningsfältet i form av "lookglass" styrs som standard av följande CSS-klassväljare:

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

CSS-egenskaper för indataknappen för sökning

width
Bredd på indataknappen för sökning.
height
Höjden på indataknappen för sökning.
background-image
URL:en till ikonbilden för "lookglass".
background-size
Storleken på ikonen för "lookglass".
border
Kant på indataknappen för sökning.
marginal
Marginal för sökknappen.

Exempel - Så här ställer du in en sökknapp med 26 x 26 pixlar "look glass"-ikon; 30 pixlar med en 1 pixelkant:

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

Sökresultatpanelen kan visa en textfråga när funktionen anropas för första gången. Dessutom visas ett meddelande när en användares sökning inte gav några resultat. I samtliga fall visas texten i huvuddelen av sökresultatpanelen och styrs av följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

CSS-egenskaper för sökinformationen

färg
Textens färg.
font-family
Namnet på textteckensnittet.
font-align
Vågrät textjustering.
font-size
Storlek på teckensnittstext.
NOTE
Den här textpanelen har stöd för state attributväljare, som kan användas för att tillämpa olika format på olika textmeddelanden. Särskilt gäller följande: state='prompt' motsvarar den textprompt som visas när panelen anropas för första gången. The state='results' motsvarar texten med information om sökträffar. Och slutligen state='no_results' motsvarar den text som visas när sökfrågan inte returnerade några resultat.

Meddelandet kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.

Exempel - Så här ställer du in en textpanel som använder ett grått 18-pixelsteckensnitt:

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

Sökresultaten återges som en enda kolumn eller som en enda rad med miniatyrbilder för sidor med sökträffar. Avståndet mellan miniatyrbilder av sökresultat styrs med följande CSS-klassväljare:

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

CSS-egenskaper för miniatyrcellerna

marginal
Storleken på den lodräta marginalen runt varje miniatyrbild. Faktiskt avstånd för miniatyrbilder är lika med summan av de övre och nedre marginalerna som angetts för .s7thumbcell .

Exempel - Så här ställer du in tio pixelavstånd:

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

Utseendet på enskilda miniatyrbilder styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

CSS-egenskaper för miniatyrbilden

width
Miniatyrbildens bredd.
height
Höjden på miniatyrbilden.
border
Miniatyrens kantlinje.

Exempel - Om du vill ställa in miniatyrbilder som är 215 x 129 pixlar har du en ljusgrå standardkantlinje och en mörkgrå markerad kantlinje:

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

Utseendet på miniatyrbildetiketten styrs av följande CSS-klassväljare:

 .s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label

CSS-egenskaper för etiketten

färg
Textfärg.
font-family
Namnet på textteckensnittet.
font-size
Storlek på textteckensnitt.

Exempel - Så här ställer du in etiketter med 12 pixlar, grå, Helvetica®-teckensnitt:

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

På system där musindata används visas två rullningsknappar längst ned på sökresultatpanelen för att användaren ska kunna bläddra igenom sökresultaten. Utseendet på upp- och nedrullningsknapparna styrs av följande CSS-klassväljare:

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

Det går inte att placera rullningsknappar med CSS-egenskaperna top, left, bottom och right. I stället placerar visningsprogramlogiken dem automatiskt.

CSS-egenskaper för rullningsknapparna uppåt och nedåt

width
Bredd på rullningsknappen.
height
Höjden på rullningsknappen.
background-image
Bilden som visas för ett visst knappläge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se även CSS-fragment.

NOTE
Den här knappen har stöd för state attributväljare, som kan användas för att tillämpa olika skal på "up", "down", "over"och "disabled" knapplägen.

Knappens tips kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.

Exempel - Så här ställer du in en rullningsknapp som är 125 x 35 pixlar och har olika teckningar för varje läge:

.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);
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8