縮圖由縮圖影像的格線組成,右側有可選的捲軸,以允許垂直捲動。
按一下主控制列中的縮圖按鈕,即可切換縮圖。 當縮圖處於作用中時,它們會以重疊在檢視器使用者介面上的模態模式顯示。 檢視器邏輯會自動將縮圖容器調整為整個檢視器區域。
縮圖容器的外觀是使用下列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);
}