缩略图由缩略图图像的网格组成,其右侧有一个可选滚动条,以允许垂直滚动。
单击主控件栏中的缩略图按钮可切换缩略图。 当缩略图处于活动状态时,它们以模式模式模式显示在查看器用户界面的顶部。 查看器逻辑会自动将缩略图容器大小调整到整个查看器区域。
缩略图容器的外观由以下CSS类选择器控制:
.s7ecatalogviewer .s7thumbnailgridview
CSS属性 |
说明 |
---|---|
顶端 |
缩略图容器从查看器顶部的垂直偏移。 |
上边距 |
上边距。 |
左边距 |
左边距。 |
右边距 |
右边距。 |
下边距 |
下边距。 |
background-color |
缩略图区域的背景颜色。 |
示例 — 设置缩略图从顶部偏移32像素,左右边距5像素,底部边距8像素,使用 0xDDDDDD
背景。
.s7ecatalogviewer .s7thumbnailgridview {
top: 32px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 8px;
background-color: rgb(221, 221, 221);
}
缩略图之间的间距由以下CSS类选择器控制:
.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell
CSS属性 |
说明 |
---|---|
margin |
每个缩略图周围的水平和垂直边距的大小。 实际水平缩略图间距等于设置的左右边距之和 .s7thumbcell . 垂直缩略图间距等于上边距和下边距之和。 |
示例 — 在垂直和水平方向上设置10像素空间。
.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell {
margin: 5px;
}
单个缩略图的外观可通过以下CSS类选择器进行控制:
.s7ecatalogviewer .s7thumbnailgridview .s7thumb
CSS属性 |
说明 |
---|---|
width |
缩略图的宽度。 |
height |
缩略图的高度。 |
边界 |
缩略图的边框。 |
background-color |
缩略图的背景颜色。 |
在触摸设备上,当旋转到纵向模式时,如果查看器决定将目录拆分到单独的页面中,则查看器可以将缩略图的大小调整为所配置内容的一半。
缩略图支持 state
属性选择器,可用于将不同的外观应用于不同的缩略图状态。 特别是, state="selected"
对应于当前在主视图中显示的图像的缩略图, state="default"
与其余缩略图相对应,并且 state="over"
鼠标悬停时使用。
示例 — 设置120 x 85像素、白色背景、浅灰色标准边框和深灰色选定边框的缩略图。
.s7ecatalogviewer .s7thumbnailgridview .s7thumb {
width:120px;
height:85px;
background-color: rgb(255, 255, 255);
border: solid 1px #999999;
}
.s7ecatalogviewer .s7thumbnailgridview .s7thumb[state="selected"]{
border: solid 2px #666666;
}
缩略图标签的外观可通过以下CSS类选择器进行控制:
.s7ecatalogviewer .s7thumbnailgridview .s7label
CSS属性 |
说明 |
---|---|
字体系列 |
字体名称。 |
font-size |
字体大小. |
示例 — 设置标签以使用14像素Helvetica®字体。
.s7ecatalogviewer .s7thumbnailgridview .s7label {
font-family: Helvetica,sans-serif;
font-size: 12px;
}
如果缩略图多于可以垂直放入视图中的缩略图,则缩略图会在右侧呈现垂直滚动条。 使用以下CSS类选择器控制滚动条区域的外观:
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar
CSS属性 |
说明 |
---|---|
width |
滚动条的宽度。 |
顶端 |
垂直滚动条从缩略图区域顶部偏移。 |
底部 |
垂直滚动条从缩略图区域的底部偏移。 |
右 |
水平滚动条从缩略图区域的右边缘偏移。 |
示例 — 设置一个宽度为28像素的滚动条,该滚动条在缩略图区域的顶部、右侧和底部具有8像素的边距。
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar {
top:8px;
bottom:8px;
right:8px;
width:28px;
}
滚动条轨道是上下滚动按钮之间的区域。 组件会自动设置轨道的位置和高度。 使用以下CSS类选择器控制跟踪:
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack
CSS属性 |
说明 |
---|---|
width |
滚动条轨道的宽度。 |
background-color |
滚动条轨道的背景颜色。 |
示例 — 设置宽度为28像素并具有半透明灰色背景的滚动条轨道。
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
width:28px;
background-color:rgba(102, 102, 102, 0.5);
}
滚动条缩略图在滚动轨道区域内垂直移动。 其垂直位置完全由组件逻辑控制,但是,缩略图高度不会因内容量而动态变化。 可通过以下CSS类选择器控制缩略图高度和其他方面:
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb
CSS属性 |
说明 |
---|---|
width |
滚动条缩略图的宽度。 |
height |
滚动条缩略图的高度。 |
上内边距 |
滚动条轨道顶部之间的垂直边距。 |
底部填充 |
滚动条轨道底部之间的垂直边距。 |
background-image |
为给定缩略图状态显示的图像。 |
background-position |
如果使用CSS sprite,则定位在图稿sprite中。 另请参阅 CSS脚本 . |
缩略图支持 state
属性选择器,可用于将不同的外观应用于缩略图状态 up
, down
, over
、和 disabled
.
示例 — 设置一个滚动条缩览图,其大小为28 x 45像素,顶部和底部有10像素边距,并且每个状态具有不同的图稿。
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb {
width:28px;
background-repeat:no-repeat;
background-position:center;
height:45px;
padding-top:10px;
padding-bottom:10px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
顶部和底部滚动按钮的外观由以下CSS类选择器控制:
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton
无法使用CSS定位滚动按钮 top
, left
, bottom
、和 right
属性。 相反,查看器逻辑会自动定位它们。
CSS属性 |
说明 |
---|---|
width |
按钮的宽度。 |
height |
按钮的高度。 |
background-image |
为给定缩略图状态显示的图像。 |
background-position |
如果使用CSS sprite,则定位在图稿sprite中。 另请参阅 CSS脚本 . |
这些按钮支持 state
属性选择器,可用于将不同的外观应用于不同的按钮状态 up
, down
, over
、和 disabled
.
按钮工具提示可以本地化。 请参阅 用户界面元素的本地化 以了解更多信息。
示例 — 设置滚动按钮,这些按钮为28 x 32像素,并且每种状态的图稿各不相同。
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}