搜索结果面板

搜索结果面板由顶部的搜索输入框和显示信息性消息或搜索结果的主要区域组成。

主查看器区域的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

搜索输入字段的高度。

左侧填充

输入字段边界和输入文本之间的内边距。

边界

搜索输入字段的边框。

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

“外观玻璃”图标的大小。

边界

搜索输入按钮的边框。

margin

搜索输入按钮的边距。

示例 — 要设置具有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

水平文本对齐方式。

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

缩略图的高度。

边界

缩略图的边框。

示例 — 要设置像素为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);

在此页面上