“搜索结果”面板

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

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

搜索输入字段的高度。

左边距

输入字段范围与输入文本之间的内部填充。

边界

搜索输入字段的边框。

margin

搜索输入字段的边距

字体大小

文本字体的大小。

示例 — 设置具有0像素高度和14像素文本字体的搜索输入字段:

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

默认情况下,以“外观玻璃”形式显示的搜索输入字段左侧的搜索按钮由以下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-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属性

颜色

文本颜色.

字体系列

文本字体的名称。

字体大小

文本字体的大小。

示例 — 设置使用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属性

宽度

滚动按钮的宽度。

高度

滚动按钮的高度。

背景图像

为给定按钮状态显示的图像。

背景位置

在图稿Sprite中放置(如果使用CSS Sprite)。

另请参阅 CSS Sprite

注意

此按钮支持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);

在此页面上