目次は、メインコントロールバーにあるボタンです。 アクティブにすると、ページインデックスとラベルのリストが含まれたドロップダウンパネルが表示されます。
設定に基づいて、リストには、カタログ内に存在するすべてのページを含めることも、明示的なラベルが定義されているページのみを含めることもできます。 デスクトップシステムでは、リストが使用可能な画面のスペースより長い場合、右側にスクロールバーが表示されます。
ビューアユーザインターフェイス内の目次ボタンの位置とサイズは、以下の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);
}