搜索结果面板 search-results-panel
搜索结果面板由顶部的搜索输入框和显示信息性消息或搜索结果的主区域组成。
主查看器区域的 CSS属性
当面板处于活动状态时,查看器用户界面被半透明填充覆盖。 此填充的颜色和不透明度可通过以下CSS类选择器进行控制:
.s7ecatalogviewer .s7searchpanel .s7backoverlay
搜索结果面板始终占据所有可用的查看器高度。 但是,您可以配置宽度。 可以将宽度设置为绝对像素值,这是大中型断点的默认设置。 或者,您可以将宽度设置为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属性
示例 — 要设置一个搜索按钮,其中包含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属性
state
属性选择器,该选择器可用于将不同的样式应用于不同的文本消息。 特别是,state='prompt'
对应于首次调用面板时显示的文本提示。 state='results'
对应于包含有关搜索点击信息的文本。 最后,state='no_results'
对应于搜索查询未返回任何结果时显示的文本。可以对消息文本进行本地化。 有关详细信息,请参阅用户界面元素的本地化。
示例 — 设置使用灰色18像素字体的文本面板:
.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo {
font-size: 18px;
color: #696969;
}
对于具有搜索点击的页面,搜索结果呈现为一列或一行缩略图。 搜索结果缩略图之间的间距由以下CSS类选择器控制:
.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell
缩略图单元格的 CSS属性
示例 — 要设置十个像素间距:
.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属性
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);