設定に基づいて、リストには、カタログ内に存在するすべてのページを含めることも、明示的なラベルが定義されているページのみを含めることもできます。デスクトップシステムでは、リストが使用可能な画面のスペースより長い場合、右側にスクロールバーが表示されます。

ビューアユーザインターフェイス内の目次ボタンの位置とサイズは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7tableofcontents

目次のCSSプロパティ

margin-top	コントロールバーの上端からのオフセット。
margin-left	左側の次のボタンまでの距離、または行の最初のボタンの場合はコントロールバーの左側までの距離です。
width	目次ボタンの幅。
height	目次ボタンの高さ。
background-image	ボタンの特定の状態に対して表示する画像。
background-position	CSSスプライトを使用する場合、アートワークスプライト内の位置。 CSSスプライトも参照してください。

メモ

このボタンでは、state属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。

ボタンのツールチップをローカライズできます。詳しくは、ユーザインターフェイス要素のローカライゼーションを参照してください。

例 — メインコントロールバーの下から4ピクセル、左から43ピクセルの位置に配置する目次ボタンを設定します。サイズは28 x 28ピクセルで、ボタンの4つの状態ごとに異なる画像が表示されます。

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

ドロップダウンパネルの外観は、以下のCSSクラスセレクターを使用して制御します。

 .s7ecatalogviewer .s7tableofcontents .s7panel

ドロップダウンパネルのCSSプロパティ

background-color	ドロップダウンパネルの背景色。
margin	パネルの境界とコンテンツの間の内部オフセット。
box-shadow	パネル周囲のドロップシャドウ。

メモ

CSSからドロップダウンパネルのサイズや位置を制御することはできません。コンポーネントは、そのレイアウトをプログラムで管理します。

例 — 背景色が半透明の黒で、コンテンツの周囲のマージンが5ピクセルで、ドロップシャドウのあるドロップダウンパネルを設定します。

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

個々の項目のルック&フィールは、以下のCSSクラスセレクターを使用して制御します。

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7item

項目のCSSプロパティ

font-family	フォント名
font-size	フォントサイズ
height	項目の高さ。
パディング	内部のパディング。

メモ

ドロップダウンリスト項目では、state属性セレクターがサポートされます。このセレクターは、項目にカーソルを合わせた状態や選択した状態ごとに異なるスキンを適用するのに使用できます。

例 — フォントがHelvetica 14ピクセル、高さが19ピクセルのドロップダウン項目を設定します。項目の背景色は、カーソルを合わせたときに濃いグレーになり、選択したときに薄いグレーになります。

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

ページインデックスを表示する要素は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index

ページインデックスのCSSプロパティ

min-width	要素の幅の最小値。
max-width	要素の幅の最大値。
padding-right	ページインデックスとページラベルの間隔。

メモ

s7index CSSクラスにdisplay:noneを設定すると、ページインデックスを完全に非表示にできます。

例1 — 幅の最小値が40ピクセル、最大値が70ピクセルで、右側に5ピクセルのマージンがあるページインデックスを設定します。

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

例2 — ページインデックスを非表示にする：

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

ページラベルは、以下のCSSクラスセレクターを使用して制御します。

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7label

ページラベルのCSSプロパティ

min-width	要素の幅の最小値。
max-width	要素の幅の最大値。

例 — 幅の最小値が40ピクセル、最大値が240ピクセルのページインデックスを設定します。

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

ドロップダウンパネル内の垂直方向に収まらないアイテムが多く、システムがデスクトップの場合は、パネルの右側に垂直方向のスクロールバーが表示されます。スクロールバー領域の外観は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7tableofcontents .s7scrollbar

スクロールバーのCSSプロパティ

width	スクロールバーの幅。
トップ	パネル領域の上端からのスクロールバーの垂直方向のオフセット。
下	パネル領域の下端からのスクロールバーの垂直方向のオフセット。
右	パネル領域の右端からのスクロールバーの水平方向のオフセット。

例 — 幅が28ピクセルで、パネルの上、右または下の領域にマージンがないスクロールバーを設定します。

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

スクロールバートラックは、上下のスクロールボタンの間の領域です。トラックの位置と高さが自動的に設定されます。このトラックは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

スクロールトラックのCSSプロパティ

width	トラックの幅。
background-color	トラックの背景色。

例 — 幅が28ピクセルで、背景色が半透明のグレーのスクロールバートラックを設定します。

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

スクロールバーサムは、スクロールトラック領域内で垂直方向に移動します。その垂直方向の位置は、コンポーネントのロジックによって制御されます。一方、サムの高さは、コンテンツの量に応じて動的に変化するわけではありません。サムの高さや、その他の外観は、以下のCSSクラスセレクターを使用して設定できます。

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

スクロールバーサムのCSSプロパティ

width	サムの幅。
height	サムの高さ。
padding-top	トラックの上端との間の垂直方向のパディング。
padding-bottom	トラックの下端との間の垂直方向のパディング。
background-image	サムの特定の状態に対して表示する画像。
background-position	CSSスプライトを使用する場合、アートワークスプライト内の位置。 CSSスプライトも参照してください。

メモ

サムでは、state属性セレクターがサポートされます。このセレクターは、up、down、overおよびdisabledのサムの状態ごとに異なるスキンを適用するのに使用できます。

例 — 28 x 45ピクセルで、上下に10ピクセルのマージンがあり、状態ごとに異なるアートワークを持つスクロールバーサムを設定します。

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

上下のスクロールボタンの外観は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton

CSS top、left、bottom、rightの各プロパティを使用してスクロールボタンを配置することはできません。ビューアのロジックによって自動的に配置が決まります。

上スクロールボタンと下スクロールボタンのCSSプロパティ

width	ボタンの幅。
height	ボタンの高さ。
background-image	ボタンの特定の状態に対して表示する画像。
background-position	CSSスプライトを使用する場合、アートワークスプライト内の位置。 CSSスプライトも参照してください。

メモ

ボタンでは、state属性セレクターがサポートされます。このセレクターは、up、down、overおよびdisabledの各ボタンの状態ごとに異なるスキンを適用するのに使用できます。

ボタンのツールチップをローカライズできます。詳しくは、ユーザインターフェイス要素のローカライゼーションを参照してください。

例 — 28 x 32ピクセルで、状態ごとに異なるアートワークを持つスクロールボタンを設定します。

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