搜尋結果面板

搜索結果面板由頂部的搜索輸入框和顯示資訊消息或搜索結果的主區域組成。

主檢視器區域的CSS屬性

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

.s7ecatalogviewer .s7searchpanel .s7backoverlay

CSS屬性	說明
背景色	覆蓋的顏色。
不透明度	顏色的不透明度。

搜尋結果面板永遠佔據所有可用的檢視器高度。不過，您可以設定寬度。您可以將寬度設為絕對像素值，這是中大型中斷點的預設設定。或者，您可以將寬度設為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	搜尋輸入欄位的邊界
字型大小	文字字型大小。

範例——若要設定搜尋輸入欄位，其中包含0像素高度和14像素文字字型：

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

依預設，搜尋輸入欄位左側的搜尋按鈕會以"looking glass"的形式由下列CSS類別選擇器控制：

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

搜尋輸入按鈕的CSS屬性

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

示例——設定一個26 x 26像素的「查找玻璃」表徵圖的搜索按鈕；大小為30像素，邊框為1像素：

.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	水準文字對齊。
字型大小	字型文字的大小。

注意

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

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

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

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

搜尋結果會呈現為具有搜尋點擊之頁面的單一欄或單列縮圖。使用下列CSS類別選擇器控制搜尋結果縮圖之間的間距：

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

縮圖儲存格的CSS屬性

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

範例——若要設定10像素間距：

.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屬性

顏色	文字色彩.
font-family	文字字型名稱。
字型大小	文字字型大小。

示例——要設定使用12像素、灰色、Helvetica字型的標籤：

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

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

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

無法使用CSS上、左、下和右屬性來定位捲動按鈕。檢視器邏輯會自動將它們定位。

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

寬度	捲動按鈕的寬度。
高度	捲動按鈕的高度。
背景影像	為指定按鈕狀態顯示的影像。
背景位置	如果使用CSS精靈，請放在圖稿精靈內。另請參閱 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);