縮圖

縮圖由縮圖影像的格線組成,右側可選用捲軸,以允許垂直捲動。

按一下主控制列中的縮圖按鈕來切換縮圖。 當縮圖作用中時,會以重疊在檢視器使用者介面上方的強制回應模式顯示。 檢視器邏輯會自動將縮圖容器調整為整個檢視器區域的大小。

縮圖容器的外觀由下列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

縮圖的高度。

border

縮圖的邊框。

背景顏色

縮圖的背景顏色。

在觸控裝置上,當旋轉為縱向模式時,檢視器可能會將縮圖大小為所設定內容的一半,以備決定將目錄跨頁分割為個別頁面時使用。

注意

縮圖支援 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屬性

說明

寬度

捲動條拇指的寬度。

高度

捲動條縮圖的高度。

邊框間距 — 頂端

捲動條軌道頂部之間的垂直邊框間距。

邊框間距

捲動條軌道底部之間的垂直邊框間距。

背景 — 影像

為給定拇指狀態顯示的影像。

背景位置

如果使用CSS精靈,則位於圖稿精靈內。

另請參閱 CSS Sprite .

注意

拇指支援 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屬性

說明

寬度

按鈕的寬度。

高度

按鈕的高度。

背景 — 影像

為給定拇指狀態顯示的影像。

背景位置

如果使用CSS精靈,則位於圖稿精靈內。

另請參閱 CSS Sprite .

注意

這些按鈕支援 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);
}

本頁內容