缩略图

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

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

通过以下CSS类选择器控制缩略图容器的外观:

.s7ecatalogviewer .s7thumbnailgridview

CSS属性

说明

顶端

缩略图容器与查看器顶部的垂直偏移。

边距 — 顶部

上边距。

边距 — 左

左边距。

边距右侧

右边距。

边距 — 底部

下边距。

背景颜色

缩略图区域的背景颜色。

示例 — 将缩略图设置为距上部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

缩略图的高度。

边界

缩略图的边框。

背景颜色

缩略图的背景颜色。

在触控设备上,当旋转为纵向模式时,查看器可能会将缩略图的大小调整为所配置内容的一半,以防它决定将目录跨页拆分为各个页面。

注意

缩略图支持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属性

说明

字体系列

字体名称。

字体大小

字体大小.

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

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

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

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar

CSS属性

说明

宽度

滚动条的宽度。

顶端

垂直滚动条与缩略图区域顶部的偏移。

底部

垂直滚动条与缩略图区域底部偏移。

缩略图区域右边缘的水平滚动条偏移。

示例 — 设置宽度为28像素的滚动条,该滚动条距缩览图区域的上、右和下方有8像素的边距。

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

滚动条轨道是顶部和底部滚动按钮之间的区域。 该组件会自动设置轨道的位置和高度。 通过以下CSS类选择器控制跟踪:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

CSS属性

说明

宽度

滚动条轨道的宽度。

背景颜色

滚动条轨道的背景颜色。

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

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

滚动条拇指在滚动轨道区域内垂直移动。 其垂直位置完全由组件逻辑控制,但是,缩览图高度不会根据内容量动态更改。 通过以下CSS类选择器控制缩览图高度和其他方面:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSS属性

说明

宽度

滚动条拇指的宽度。

高度

滚动条缩略图的高度。

padding-top

滚动条轨道顶部之间的垂直边距。

padding-bottom

滚动条轨道底部之间的垂直边距。

背景图像

为给定的拇指状态显示的图像。

背景位置

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

另请参阅 CSS Sprite

注意

缩览图支持state属性选择器,该选择器可用于将不同的外观应用于缩览图状态updownoverdisabled

示例 — 要设置一个滚动条缩览图,该缩览图为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 topleftbottomright属性来定位滚动按钮。 查看器逻辑而是会自动定位它们。

CSS属性

说明

宽度

按钮的宽度。

高度

按钮的高度。

背景图像

为给定的拇指状态显示的图像。

背景位置

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

另请参阅 CSS Sprite

注意

这些按钮支持state属性选择器,该选择器可用于将不同的外观应用于不同的按钮状态updownoverdisabled

按钮工具提示可进行本地化。 有关更多信息,请参阅用户界面元素的本地化

示例 — 设置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); 
}

在此页面上