サムネール thumbnails
サムネールは、サムネール画像のグリッドで構成され、右側にオプションのスクロールバーが表示され、垂直方向のスクロールが可能になります。
サムネールは、メインコントロールバーのサムネールボタンをクリックすることで切り替えられます。 サムネールがアクティブな場合、ビューアユーザーインターフェイスの上に重ねてモーダルモードで表示されます。 ビューアリジックは、サムネールコンテナをビューア領域全体に自動的にサイズ変更します。
サムネールコンテナの外観は、次のCSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7thumbnailgridview
例 – サムネールを設定して、上部から32 ピクセルのオフセット、左右に5 ピクセルのマージン、下部に8 ピクセルのマージンを設定し、背景を0xDDDDDDにします。
.s7ecatalogsearchviewer .s7thumbnailgridview {
top: 32px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 8px;
background-color: rgb(221, 221, 221);
}
サムネール間の間隔は、次のCSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell
例 – 垂直方向と水平方向の両方で10 ピクセルのスペースを設定します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell {
margin: 5px;
}
個々のサムネールの外観は、次のCSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb
タッチデバイスでは、ポートレートモードに回転すると、カタログスプレッドを個別のページに分割する場合、ビューアは設定されているサイズの半分にサムネールをサイズ変更できます。
state属性セレクターをサポートしています。このセレクターを使用すると、異なるサムネール状態に異なるスキンを適用できます。 特に、state="selected"は現在メインビューに表示されている画像のサムネールに対応し、state="default"は残りのサムネールに対応し、state="over"はマウスオーバーで使用されます。例 – 120 x 85 ピクセルのサムネールを設定するには、白い背景、明るいグレーの標準の境界線、濃いグレーの選択した境界線があります。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb {
width:120px;
height:85px;
background-color: rgb(255, 255, 255);
border: solid 1px #999999;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb[state="selected"]{
border: solid 2px #666666;
}
サムネールラベルの外観は、次のCSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7label
例 – 14 ピクセルのHelvetica® フォントを使用するようにラベルを設定します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7label {
font-family: Helvetica,sans-serif;
font-size: 12px;
}
ビューに垂直方向に収まる数よりも多いサムネールがある場合、サムネールは右側の垂直方向のスクロールバーをレンダリングします。 スクロールバー領域の外観は、次のCSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar
例 – 28 ピクセル幅で、サムネール領域の上下から8 ピクセルの余白を持つスクロールバーを設定します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar {
top:8px;
bottom:8px;
right:8px;
width:28px;
}
スクロールバートラックは、上と下のスクロールボタンの間の領域です。 コンポーネントは、トラックの位置と高さを自動的に設定します。 トラックは、次のCSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack
例 – 28 ピクセル幅で、半透明のグレーの背景を持つスクロールバートラックを設定します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
width:28px;
background-color:rgba(102, 102, 102, 0.5);
}
スクロールバーの親指は、スクロールトラック領域内で垂直方向に移動します。 垂直位置はコンポーネントロジックによって完全に制御されますが、コンテンツの量によっては親指の高さが動的に変化することはありません。 親指の高さやその他の要素は、次のCSS クラスセレクターで制御できます。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb
CSS スプライトを使用する場合は、アートワークスプライト内に配置します。
CSS スプライトも参照してください。
state属性セレクターをサポートしています。このセレクターを使用すると、親指の状態up、down、over、およびdisabledに異なるスキンを適用できます。例 – 28 x 45 ピクセルのスクロールバーの親指を設定するには、上下に10 ピクセルの余白があり、各状態に対して異なるアートワークを設定します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb {
width:28px;
background-repeat:no-repeat;
background-position:center;
height:45px;
padding-top:10px;
padding-bottom:10px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
上と下のスクロールボタンの外観は、次のCSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton
CSS top、left、bottom、rightのプロパティを使用してスクロールボタンを配置することはできません。 代わりに、ビューアリジックによって自動的に配置されます。
CSS スプライトを使用する場合は、アートワークスプライト内に配置します。
CSS スプライトも参照してください。
state属性セレクターをサポートしています。このオプションを使用すると、異なるボタンの状態up、down、over、およびdisabledに異なるスキンを適用できます。ボタンツールのヒントはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 – 28 x 32 ピクセルで、状態ごとに異なるアートワークを持つスクロールボタンを設定します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}