目錄

目錄是位於主控制欄中的按鈕。 啟動後，下拉式面板隨即顯示頁面索引和標籤清單。

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

查看器用戶介面中目錄按鈕的位置和大小由以下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屬性選取器，可用來套用不同外觀以暫留和選取的項目狀態。

範例 — 設定下拉式項目，其字型為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 Sprite 。

注意

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 Sprite 。

注意

Button支援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); 
}

本頁內容