搜尋結果面板

搜尋結果面板由頂部的搜尋輸入方塊和顯示資訊性訊息或搜尋結果的主要區域組成。

主要檢視器區域的CSS屬性

當面板啟動時，檢視器使用者介面會以半透明填色覆蓋。 此填色的顏色和不透明度由下列CSS類別選取器控制：

.s7ecatalogviewer .s7searchpanel .s7backoverlay

CSS屬性

說明

background-color

覆蓋圖的色彩。

不透明度

色彩的不透明度。

搜尋結果面板一律佔據所有可用的檢視器高度。 不過，您可以設定寬度。 您可以將寬度設定為絕對畫素值，這是中型與大型中斷點的預設設定。 或者，您可以將寬度設定為100%，讓搜尋結果面板佔據整個檢視器區域。 面板寬度由下列CSS類別選擇器控制：

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

搜尋結果空間的CSS屬性

width

搜尋結果空間的寬度。

範例 — 若要在大中型中斷點上設定250畫素寬的搜尋結果面板，並在小型中斷點上使用全尺寸面板：

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

搜尋結果面板的頂端專用於搜尋輸入方塊。 輸入方塊側邊的填補是由下列CSS類別選取器所控制：

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

搜尋輸入容器的CSS屬性

填補

輸入方塊周圍的內距。

搜尋輸入欄位由下列CSS類別選擇器控制：

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

搜尋輸入欄位的CSS屬性

height

搜尋輸入欄位的高度。

左內邊距

輸入欄位界限和輸入文字之間的內邊距。

border

搜尋輸入欄位的邊框。

margin

搜尋輸入欄位的邊界

font-size

文字字型的大小。

範例 — 若要設定具有0畫素高度和14畫素文字字型的搜尋輸入欄位：

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

依預設，以「外觀玻璃」形式顯示的搜尋輸入欄位左側的搜尋按鈕由以下CSS類別選取器控制：

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

搜尋輸入按鈕的CSS屬性

width

搜尋輸入按鈕的寬度。

height

搜尋輸入按鈕的高度。

background-image

「外觀玻璃」圖示影像的URL。

background-size

「外觀玻璃」圖示的大小。

border

搜尋輸入按鈕的邊框。

margin

搜尋輸入按鈕的邊界。

範例 — 若要設定具有26 x 26畫素「外觀玻璃」圖示的搜尋按鈕；具有1畫素邊框的30畫素大小：

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

第一次呼叫功能時，搜尋結果面板可能會顯示文字提示。 此外，它也會在使用者的搜尋未傳回任何結果時顯示訊息。 在所有情況下，文字都會顯示在搜尋結果面板的主要部分，並受到下列CSS類別選取器的控制：

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

搜尋資訊的CSS屬性

color

文字的色彩。

font-family

文字字型名稱。

font-align

水準文字對齊方式。

font-size

字型文字的大小。

注意

此文字面板支援 state 屬性選擇器，可將不同的樣式套用至不同的文字訊息。 尤其是， state='prompt' 對應於第一次呼叫面板時顯示的文字提示。 此 state='results' 與包含搜尋點選相關資訊的文字相對應。 最後， state='no_results' 與搜尋查詢未傳回任何結果時顯示的文字相對應。

訊息文字可翻譯。 另請參閱 使用者介面元素的本地化 以取得詳細資訊。

範例 — 若要設定使用灰色18畫素字型的文字面板：

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

對於具有搜尋點選的頁面，搜尋結果會呈現為單欄或單列縮圖。 搜尋結果縮圖之間的間距由下列CSS類別選取器控制：

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

縮圖儲存格的CSS屬性

margin

每個縮圖周圍的垂直邊界大小。 實際縮圖間距等於為設定的上下邊界總和 .s7thumbcell .

範例 — 若要設定十個畫素間距：

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

個別縮圖的外觀由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

縮圖的CSS屬性

width

縮圖的寬度。

height

縮圖的高度。

border

縮圖的邊框。

範例 — 若要設定215 x 129畫素的縮圖，其預設邊框為淺灰色，選取邊框為深灰色：

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

縮圖示籤的外觀是由下列CSS類別選取器所控制：

 .s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label

標籤的CSS屬性

color

文字色彩。

font-family

文字字型名稱。

font-size

文字字型的大小。

範例 — 若要設定使用12畫素、灰色、Helvetica®字型的標籤：

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

在使用滑鼠輸入的系統上，搜尋結果面板底部會顯示兩個捲動按鈕，讓使用者捲動搜尋結果。 上下捲動按鈕的外觀由下列CSS類別選取器控制：

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

無法使用CSS top、left、bottom和right屬性來定位捲動按鈕。 相反地，檢視器邏輯會自動調整位置。

向上和向下捲動按鈕的CSS屬性

width

捲動按鈕的寬度。

height

捲動按鈕的高度。

background-image

針對指定按鈕狀態顯示的影像。

background-position

若使用CSS sprite，則定位在圖稿sprite內。

另請參閱 CSS精靈 .

注意

此按鈕支援 state 屬性選取器，可用來套用不同的外觀元素至 "up"， "down"， "over"、和 "disabled" 按鈕狀態。

按鈕工具提示可以本地化。 另請參閱 使用者介面元素的本地化 以取得詳細資訊。

範例 — 若要設定125 x 35畫素的向上捲動按鈕，且每個狀態都有不同的圖稿：

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

本頁內容