“缩略图”按钮 thumbnails-button
选择此按钮会重置主视图和缩略图之间的查看器。 此按钮显示在主控制栏中。 您可以使用CSS调整此按钮的大小、外观和位置。
主查看器区域的 CSS属性
使用以下CSS类选择器控制按钮的外观：
.s7ecatalogsearchviewer .s7thumbnailpagebutton
CSS属性
说明
上边距
从控件栏顶部的偏移。
左边距
与左侧的下一个按钮或控制栏左侧的距离（如果该按钮是行中的第一个按钮）。
宽度
按钮的宽度。
高度
按钮的高度。
背景图像
针对给定按钮状态显示的图像。
背景位置
如果使用CSS sprite，则定位在图稿sprite中。
另请参阅 CSS Sprite。
NOTE
此按钮同时支持
state和selected属性选择器，它们可用于将不同的外观应用于不同的按钮状态。 特别是，selected='true'对应于缩略图模式为活动状态的查看器状态，selected='false'对应于主视图的默认状态。按钮工具提示可以本地化。 有关详细信息，请参阅用户界面元素的本地化。
示例 — 设置一个缩略图按钮，其大小为28 x 28像素，并且从底部放置4像素，从主控件栏的左边缘放置5像素。 最后，在选中或未选中时，为四种不同的按钮状态中的每种状态显示不同的图像。
.s7ecatalogsearchviewer .s7thumbnailpagebutton{
margin-top: 4px;
margin-left: 5px; width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='false'][state='up'] {
background-image:url(images/v2/ThumbnailPageButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='false'][state='over'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='false'][state='down'] {
background-image:url(images/v2/ThumbnailPageButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='false'][state='disabled'] {
background-image:url(images/v2/ThumbnailPageButton_dark_disabled.png);
}
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='true'][state='up'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='true'][state='over'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='true'][state='down'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='true'][state='disabled'] {
background-image:url(images/v2/ThumbnailPageButton_dark_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8