縮圖

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

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

縮圖容器的外觀是使用下列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狀態updownoverdisabled

範例——若要設定捲軸縮圖,此縮圖為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 topleftbottomright屬性來定位捲動按鈕。 檢視器邏輯會自動將它們定位。

CSS屬性

說明

寬度

按鈕的寬度。

高度

按鈕的高度。

背景影像

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

背景位置

如果使用CSS精靈,請放在圖稿精靈內。

另請參閱 CSS精靈

注意

這些按鈕支援state屬性選擇器,可用來將不同的外觀套用至不同的按鈕狀態updownoverdisabled

按鈕工具提示可以本地化。 如需詳細資訊,請參閱使用者介面元素的本地化

範例——設定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); 
}

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now