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