縮圖

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

按一下主控制列中的縮圖按鈕，即可切換縮圖。當縮圖處於作用中時，它們會以重疊在檢視器使用者介面上的模態模式顯示。檢視器邏輯會自動將縮圖容器調整為整個檢視器區域。

縮圖容器的外觀是使用下列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屬性	說明
margin	每個縮圖周圍的水準和垂直邊界大小。實際水準縮圖間距等於為 .s7thumbcell 設定的左和右邊界的總和。垂直縮圖間距等於上邊界和下邊界的總和。

示例——垂直和水準設定10像素空間。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell { 
 margin: 5px; 
}

個別縮圖的外觀由下列CSS類別選擇器控制：

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

CSS屬性	說明
width	縮圖的寬度。
height	縮圖的高度。
border	縮圖的邊框。
背景色	縮圖的背景顏色。

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

注意

縮圖支援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屬性	說明
font-family	字型名稱。
字型大小	字型大小.

示例——將標籤設定為使用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精靈，請放在圖稿精靈內。另請參閱 CSS精靈。

注意

Thumb支援state屬性選擇器，該選擇器可用於將不同的外觀應用於Thumb狀態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精靈，請放在圖稿精靈內。另請參閱 CSS精靈。

注意

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