目錄是主控制欄中的按鈕。 啟動後,下拉式面板隨即顯示頁面索引和標籤清單。
清單可以根據設定包含目錄中存在的所有頁面,或僅包含已定義明確標籤的頁面。 在案頭系統上,如果清單長於可用螢幕空間,右側會顯示捲軸。
查看器用戶介面中目錄按鈕的位置和大小由以下CSS類選擇器控制:
.s7ecatalogsearchviewer .s7tableofcontents
目錄的CSS屬性
邊距上 |
從控制欄頂端的偏移。 |
左邊距 |
左側的下一個按鈕的距離,或者控制欄左側的距離(如果此按鈕是行中的第一個按鈕)。 |
width |
目錄按鈕的寬度。 |
height |
目錄按鈕的高度。 |
背景 — 影像 |
針對指定按鈕狀態顯示的影像。 |
背景位置 |
如果使用CSS精靈,則位於圖稿精靈內。 另請參閱 CSS Sprite . |
此按鈕支援 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屬性
字型系列 |
字型名稱。 |
字型大小 |
字型大小. |
高度 |
項目的高度。 |
填補 |
內部填充。 |
下拉式清單項目支援 state
屬性選取器,可用來套用不同外觀以暫留和選取的項目狀態。
範例 — 設定下拉式項目,其字型為Helvetica® 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屬性
最小寬度 |
最小元素寬度。 |
最大寬度 |
最大元素寬度。 |
邊框間距右 |
頁面索引與頁面標籤之間的距離。 |
您可以透過設定 display:none
針對 s7index
CSS類。
範例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 Sprite . |
拇指支援 state
屬性選取器,可用來套用不同外觀 up
, down
, over
,和 disabled
拇指狀態。
示例 — 設定一個捲動條縮圖,該縮圖為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來定位捲動按鈕 top
, left
, bottom
,和 right
屬性;反之,檢視器邏輯會自動定位。
向上和向下捲動按鈕的CSS屬性
寬度 |
按鈕寬度。 |
高度 |
按鈕高度。 |
背景 — 影像 |
針對指定按鈕狀態顯示的影像。 |
背景位置 |
如果使用CSS精靈,則位於圖稿精靈內。 另請參閱 CSS Sprite . |
按鈕支援 state
屬性選取器,可用來套用不同外觀 up
, down
, over
,和 disabled
按鈕狀態。
按鈕工具提示可以本地化。 請參閱 用戶介面元素本地化 以取得更多資訊。
示例 — 設定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);
}