目錄

目錄是位於主控制列中的按鈕。 啟動後,下拉式面板會出現,並列出頁面索引和標籤。

根據配置,該清單可以包含目錄中存在的所有頁面,或僅包含已定義明確標籤的頁面。 在案頭系統上,如果清單長於可用的螢幕空間,右側會顯示捲軸。

檢視器使用者介面中目錄按鈕的位置和大小,由下列CSS類別選擇器控制:

.s7ecatalogsearchviewer .s7tableofcontents

目錄的CSS屬性

邊距頂端

與控制條頂部的偏移。

左邊距

到左側下一個按鈕的距離;如果這是一行中的第一個按鈕,則到控制列左側的距離。

width

目錄按鈕的寬度。

height

目錄按鈕的高度。

背景影像

為指定按鈕狀態顯示的影像。

背景位置

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

另請參閱 CSS精靈

注意

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

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

範例——設定目錄按鈕,從下方4像素,從主控列左側43像素;大小為28 x 28像素,並會針對四種不同的按鈕狀態顯示不同的影像:

.s7ecatalogsearchviewer .s7tableofcontents { 
margin-top: 4px; 
margin-left: 10px; width: 28px; 
 height: 28px; 
} 
.s7ecatalogsearchviewer .s7tableofcontents[state='up'] { 
background-image:url(images/v2/TableOfContents_dark_up.png); 
} 
.s7ecatalogsearchviewer .s7tableofcontents[state='over'] { 
background-image:url(images/v2/TableOfContents_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7tableofcontents[state='down'] { 
background-image:url(images/v2/TableOfContents_dark_down.png); 
} 
.s7ecatalogsearchviewer .s7tableofcontents[state='disabled'] { 
background-image:url(images/v2/TableOfContents_dark_disabled.png); 
}

下拉式面板的外觀是使用下列CSS類別選擇器來控制:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel

下拉式面板的CSS屬性

背景色

下拉式面板的背景顏色。

margin

面板邊界和內容之間的內部偏移。

方塊陰影

面板四周的陰影。

注意

無法從CSS控制下拉式面板的大小或位置;該元件以寫程式方式管理其佈局。

範例——設定下拉式面板,其中包含半透明黑色背景、內容周圍5像素邊界和下垂式陰影:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel { 
 background-color: rgba(0, 0, 0, 0.5); 
 margin: 5px; 
 box-shadow: 2px 2px 3px #c0c0c0; 
}

使用下列CSS類別選擇器來控制個別項目的外觀和感覺:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item

項目的CSS屬性

font-family

字型名稱。

字型大小

字型大小.

高度

項目的高度。

填補

內部填補。

注意

下拉式清單項目支援state屬性選擇器,可用來套用不同的面板以暫留和選取的項目狀態。

範例——設定下拉式項目,其字型為14像素,高19像素。 項目在暫留時具有深灰色背景,在選取時具有淺灰色背景:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item { 
font-family: Helvetica,sans-serif; 
font-size: 14px; 
height: 19px; 
} 
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="over"] { 
background-color: rgb(102, 102, 102); 
} 
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="selected"] { 
background-color: rgb(178, 178, 178); 
}

顯示頁面索引的元素會使用下列CSS類別選擇器加以控制:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index

頁面索引的CSS屬性

最小寬度

最小元素寬度。

最大寬度

元素寬度上限。

右邊填充

頁面索引和頁面標籤之間的距離。

注意

您可以透過為s7index CSS類別設定display:none,完全隱藏頁面索引。

範例1 —— 在右側設定最小寬度為40像素、最大寬度為70像素和5像素邊界的頁面索引:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index { 
max-width: 70px; 
min-width: 40px; 
padding-right: 5px; 
}

範例2 —— 隱藏頁面索引:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index { 
display: none; 
}

頁面標籤由下列CSS類別選擇器控制:

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label

頁面標籤的CSS屬性

最小寬度

最小元素寬度。

最大寬度

元素寬度上限。

範例——設定最小寬度為40像素、最大寬度為240像素的頁面索引:

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label { 
min-width: 40px; 
max-width: 240px; 
}

如果下拉式面板中的項目數量超過垂直大小,而且系統為案頭,則元件會在面板右側呈現垂直捲軸。 捲軸區域的外觀由下列CSS類別選擇器控制:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar

捲軸的CSS屬性

寬度

捲軸寬度。

頂部

垂直捲軸與面板區域的頂部偏移。

底部

垂直捲軸與面板區域底部偏移。

右側

水準捲軸偏離面板區域的右邊緣。

範例——設定寬28像素且面板頂端、右側或底部區域無邊界的捲軸:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar { 
 top:0px; 
 bottom:0px; 
 right:0px; 
 width:28px; 
}

捲軸列是頂端和底部捲軸按鈕之間的區域。 該元件自動設定軌道的位置和高度。 使用下列CSS類別選擇器控制音軌:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

捲軸的CSS屬性

寬度

音軌寬度。

背景色

音軌背景顏色。

範例——設定寬28像素且半透明灰色背景的捲軸列:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolltrack { 
 width:28px; 
 background-color:rgba(102, 102, 102, 0.5); 
}

捲動條拇指在滾動軌道區域內垂直移動。 其垂直位置由元件邏輯控制。 不過,拇指高度不會根據內容量而動態改變。 您可以使用下列CSS類別選擇器來設定縮圖高度和其他方面:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

捲軸縮圖的CSS屬性

寬度

拇指寬度。

高度

拇指高度。

填充頂部

軌道頂部之間的垂直間距。

填充底部

軌道底部之間的垂直間距。

背景影像

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

背景位置

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

另請參閱 CSS精靈

注意

Thumb支援state屬性選擇器,該選擇器可用於將不同的外觀應用於updownoverdisabled拇指狀態。

範例——設定捲軸縮圖28 x 45像素、上下有10像素邊界,且每個狀態的圖稿都不同:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb { 
 width:28px; 
 background-repeat:no-repeat; 
 background-position:center; 
 height:45px; 
 padding-top:10px; 
 padding-bottom:10px; 
} 
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png); 
} 
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png); 
} 
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='disabled'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png); 
}

使用下列CSS類別選擇器來控制頂端和底部捲動按鈕的外觀:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton

無法使用CSS topleftbottomright屬性來定位捲動按鈕;檢視器邏輯會自動定位。

向上和向下捲動按鈕的CSS屬性

寬度

按鈕寬度。

高度

按鈕高度。

背景影像

為指定按鈕狀態顯示的影像。

背景位置

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

另請參閱 CSS精靈

注意

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

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

範例——設定28 x 32像素且每種狀態有不同圖稿的捲動按鈕:

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png); 
} 
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png); 
} 
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='disabled'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png); 
} 
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png); 
} 
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png); 
} 
.s7ecatalogsearchviewer .s7tableofcontents .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