文件Dynamic Media檢視器參考指南

搜尋結果面板 search-results-panel

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

  • undefined
  • undefined

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

主要檢視器區域的​ CSS屬性

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

.s7ecatalogviewer .s7searchpanel .s7backoverlay
CSS屬性
說明
背景色彩
覆蓋圖的顏色。
不透明度
色彩的不透明度。

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

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

搜尋結果空間的​ CSS屬性

寬度
搜尋結果空間的寬度。

範例 — 若要在大中型中斷點上設定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屬性

高度
搜尋輸入欄位的高度。
左內距
輸入欄位界限和輸入文字之間的內邊距。
邊框
搜尋輸入欄位的邊框。
利潤
搜尋輸入欄位的邊界
字型大小
文字字型的大小。

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

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

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

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

搜尋輸入按鈕的​ CSS屬性

寬度
搜尋輸入按鈕的寬度。
高度
搜尋輸入按鈕的高度。
背景影像
「外觀玻璃」圖示影像的URL。
背景大小
「外觀玻璃」圖示的大小。
邊框
搜尋輸入按鈕的邊框。
利潤
搜尋輸入按鈕的邊界。

範例 — 若要設定具有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屬性

色彩
文字的色彩。
字型系列
文字字型名稱。
font-align
水準文字對齊方式。
字型大小
字型文字的大小。
NOTE
此文字面板支援state屬性選取器，可用來將不同的樣式套用至不同的文字訊息。 特別是，state='prompt'對應於第一次呼叫面板時顯示的文字提示。 state='results'對應到包含搜尋點選相關資訊的文字。 最後，state='no_results'對應於搜尋查詢未傳回任何結果時所顯示的文字。

訊息文字可以當地語系化。 如需詳細資訊，請參閱使用者介面元素的本地化。

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

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

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

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

縮圖儲存格的​ CSS屬性

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

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

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

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

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

縮圖的​ CSS屬性

寬度
縮圖的寬度。
高度
縮圖的高度。
邊框
縮圖的邊框。

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

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

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

 .s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label

標籤​ 的 CSS屬性

色彩
文字顏色。
字型系列
文字字型名稱。
字型大小
文字字型的大小。

範例 — 若要設定使用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屬性

寬度
捲動按鈕的寬度。
高度
捲動按鈕的高度。
背景影像
針對指定按鈕狀態顯示的影像。
背景位置

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

另請參閱 CSS Sprite。

NOTE
此按鈕支援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);
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8