文档Dynamic Media查看器参考指南

缩略图 thumbnails

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

创建对象：

  • 开发人员
  • 用户

缩略图由缩略图图像的网格组成，其右侧有一个可选滚动条，以允许垂直滚动。

单击主控件栏中的缩略图按钮可切换缩略图。 当缩略图处于活动状态时，它们以模式模式模式显示在查看器用户界面的顶部。 查看器逻辑会自动将缩略图容器大小调整到整个查看器区域。

缩略图容器的外观由以下CSS类选择器控制：

.s7ecatalogsearchviewer .s7thumbnailgridview

CSS属性
说明
前
缩略图容器从查看器顶部的垂直偏移。
上边距
上边距。
左边距
左边距。
右边距
右边距。
下边距
下边距。
背景色
缩略图区域的背景颜色。

示例 — 设置缩略图从顶部偏移了32像素，左右边距为5像素，底部边距为8像素，背景为0xDDDDDD。

.s7ecatalogsearchviewer .s7thumbnailgridview {
 top: 32px;
 margin-left: 5px;
 margin-right: 5px;
 margin-bottom: 8px;
 background-color: rgb(221, 221, 221);
}

缩略图之间的间距由以下CSS类选择器控制：

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell

CSS属性
说明
边距
每个缩略图周围的水平和垂直边距的大小。 实际水平缩略图间距等于为 .s7缩略图设置的左右边距之和。 垂直缩略图间距等于上边距和下边距之和。

示例 — 在垂直和水平方向上设置10像素空间。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell {
 margin: 5px;
}

单个缩略图的外观可通过以下CSS类选择器进行控制：

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

CSS属性
说明
宽度
缩略图的宽度。
高度
缩略图的高度。
边框
缩略图的边框。
背景色
缩略图的背景颜色。

在触摸设备上，当旋转到纵向模式时，如果查看器决定将目录拆分到单独的页面中，则查看器可以将缩略图的大小调整为所配置内容的一半。

NOTE
缩略图支持state属性选择器，该选择器可用于将不同的外观应用于不同的缩略图状态。 特别是，state="selected"对应于当前在主视图中显示的图像的缩略图，state="default"对应于缩略图的其余部分，state="over"用于鼠标悬停的情况。

示例 — 设置120 x 85像素、白色背景、浅灰色标准边框和深灰色选定边框的缩略图。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb {
 width:120px;
 height:85px;
 background-color: rgb(255, 255, 255);
 border: solid 1px #999999;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb[state="selected"]{
 border: solid 2px #666666;
}

缩略图标签的外观可通过以下CSS类选择器进行控制：

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label

CSS属性
说明
字体系列
字体名称。
字体大小
字体大小。

示例 — 设置标签以使用14像素Helvetica®字体。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label {
 font-family: Helvetica,sans-serif;
 font-size: 12px;
}

如果缩略图多于垂直放入视图的数量，则缩略图会在右侧呈现垂直滚动条。 使用以下CSS类选择器控制滚动条区域的外观：

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar

CSS属性
说明
宽度
滚动条的宽度。
前
垂直滚动条从缩略图区域顶部偏移。
后
垂直滚动条从缩略图区域的底部偏移。
右
水平滚动条从缩略图区域的右边缘偏移。

示例 — 设置一个宽度为28像素的滚动条，该滚动条在缩略图区域的顶部、右侧和底部具有8像素的边距。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar {
 top:8px;
 bottom:8px;
 right:8px;
 width:28px;
}

滚动条轨道是上下滚动按钮之间的区域。 组件会自动设置轨道的位置和高度。 使用以下CSS类选择器控制跟踪：

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

CSS属性
说明
宽度
滚动条轨道的宽度。
背景色
滚动条轨道的背景颜色。

示例 — 设置宽度为28像素并具有半透明灰色背景的滚动条轨道。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

滚动条缩略图在滚动轨道区域内垂直移动。 其垂直位置完全由组件逻辑控制，但是，缩略图高度不会因内容量而动态变化。 可通过以下CSS类选择器控制缩略图高度和其他方面：

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSS属性
说明
宽度
滚动条缩略图的宽度。
高度
滚动条缩略图的高度。
填充顶端
滚动条轨道顶部之间的垂直边距。
填充底部
滚动条轨道底部之间的垂直边距。
背景图像
为给定缩略图状态显示的图像。
背景位置

如果使用CSS sprite，则定位在图稿sprite中。

另请参阅 CSS Sprite。

NOTE
缩略图支持state属性选择器，该选择器可用于将不同的外观应用于缩略图状态up、down、over和disabled。

示例 — 设置一个滚动条缩览图，其大小为28 x 45像素，顶部和底部有10像素边距，并且每个状态具有不同的图稿。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb {
 width:28px;
 background-repeat:no-repeat;
 background-position:center;
 height:45px;
 padding-top:10px;
 padding-bottom:10px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}

顶部和底部滚动按钮的外观由以下CSS类选择器控制：

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

无法使用CSS top、left、bottom和right属性定位滚动按钮。 相反，查看器逻辑会自动定位它们。

CSS属性
说明
宽度
按钮的宽度。
高度
按钮的高度。
背景图像
为给定缩略图状态显示的图像。
背景位置

如果使用CSS sprite，则定位在图稿sprite中。

另请参阅 CSS Sprite。

NOTE
这些按钮支持state属性选择器，可用于将不同的外观应用于不同的按钮状态up、down、over和disabled。

按钮工具提示可以本地化。 有关详细信息，请参阅用户界面元素的本地化。

示例 — 设置滚动按钮，这些按钮为28 x 32像素，并且每种状态的图稿各不相同。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8