縮圖 thumbnails

縮圖是由縮圖影像的格點所組成,其右側具有可選的卷軸,以允許垂直捲動。

按一下主控制列中的縮圖按鈕即可切換縮圖。 縮圖作用中時,會以模式模式模式顯示,並覆蓋在檢視器使用者介面的上方。 檢視器邏輯會自動將縮圖容器大小調整至整個檢視器區域。

縮圖容器的外觀是由下列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
縮圖的高度。
border
縮圖的邊框。
background-color
縮圖的背景顏色。

在觸控裝置上,當旋轉至直向模式時,檢視器可能會將縮圖調整為已設定縮圖的一半,以防它決定將目錄分割為個別頁面。

NOTE
縮圖支援 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-family
字型名稱。
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內。

另請參閱 CSS精靈.

NOTE
縮圖支援 state 屬性選取器,可將不同的外觀元素套用至縮圖狀態 updownover、和 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來定位捲動按鈕 topleftbottom、和 right 屬性。 相反地,檢視器邏輯會自動調整位置。

CSS屬性
說明
width
按鈕的寬度。
height
按鈕的高度。
background-image
針對指定縮圖狀態顯示的影像。
background-position

若使用CSS拼寫,則定位在圖稿sprite內。

另請參閱 CSS精靈.

NOTE
這些按鈕支援 state 屬性選取器,可將不同的外觀元素套用至不同的按鈕狀態 updownover、和 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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8