目錄是位於主控制列中的按鈕。 啟動後,下拉式面板會出現,並列出頁面索引和標籤。
根據配置,該清單可以包含目錄中存在的所有頁面,或僅包含已定義明確標籤的頁面。 在案頭系統上,如果清單長於可用的螢幕空間,右側會顯示捲軸。
檢視器使用者介面中目錄按鈕的位置和大小,由下列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
屬性選擇器,該選擇器可用於將不同的外觀應用於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精靈。 |
按鈕支援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);
}