文件Dynamic Media檢視器參考指南

縮圖 thumbnails

Last update: Mon Jul 22 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內。

另請參閱 CSS Sprite。

NOTE
Thumb支援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內。

另請參閱 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