目次

目次は、メインコントロールバーに配置されるボタンです。 アクティブにすると、ページインデックスとラベルのリストが含まれたドロップダウンパネルが表示されます。

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

ビューアのユーザインターフェイスでの目次ボタンの位置とサイズは、以下の 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

フォントサイズ。

高さ

項目の高さ。

パディング

内部パディング。

メモ

ドロップダウンリスト項目は、 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

ページインデックスとページラベルの間の距離。

メモ

ページインデックスを完全に非表示にするには、 display:nones7index CSS クラス。

例 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 プロパティ

スクロールバーの幅。

トップ

パネル領域の上部からのスクロールバーの垂直方向のオフセット。

パネル領域の下端からの垂直スクロールバーのオフセット。

パネル領域の右端からのスクロールバーの水平方向のオフセット。

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

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

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

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

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

トラックの幅。

background-color

トラックの背景色。

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

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

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

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

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

サムの幅。

高さ

サムの高さ。

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 プロパティ

ボタンの幅。

高さ

ボタンの高さ。

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);
}

このページ