目次 table-of-contents

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

開発者
ユーザー

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

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

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

.s7ecatalogviewer .s7tableofcontents

目次の CSS プロパティ

margin-top

コントロールバーの上部からのオフセット。

margin-left

左側の次のボタンまでの距離、または行の最初のボタンの場合はコントロールバーの左側。

幅

目次ボタンの幅です。

高さ

目次ボタンの高さ。

background-image

特定のボタン状態に対して表示される画像。

background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

CSS スプライトール参照してください。

NOTE

このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる 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 プロパティ

の背景色の

ドロップダウンパネルの背景色

margin

パネル境界とコンテンツの間の内部オフセット。

ボックスの影の

パネルの周囲にドロップシャドウを適用します。

NOTE

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-size

フォントサイズ。

高さ

項目の高さ。

padding

内部パディング。

NOTE

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

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

NOTE

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

幅

スクロールバーの幅。

天

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

下

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

right

水平スクロールバーがパネル領域の右端からオフセットされます。

例 – 幅 28 ピクセルで、パネルの上部、右側、下部に余白のないスクロールバーを設定する：

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

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

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

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

幅

トラックの幅。

の背景色の

トラックの背景色。

例 – 幅 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 スプライトール参照してください。

NOTE

Thumb では、up、down、over、disabled の Thumb 状態に様々なスキンを適用するために使用できる state 属性セレクターをサポートしています。

例 – 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 スプライトール参照してください。

NOTE

ボタンでは、up、down、over、disabled のボタン状態に異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

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

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

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8