サムネールボタン

このボタンをクリックまたはタップすると、メイン表示とサムネールの間のビューアの切り替えがリセットされます。 このボタンは、メインコントロールバーに表示されます。 このボタンのサイズ設定、スキン表示および配置は、CSSを使用して行うことができます。

メインビューア領域のCSSプロパティ

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

.s7ecatalogsearchviewer .s7thumbnailpagebutton

CSSプロパティ

説明

margin-top

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

margin-left

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

width

ボタンの幅。

height

ボタンの高さ。

background-image

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

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

メモ

このボタンでは、stateselectedの属性セレクターがサポートされます。これらのセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。 具体的には、selected='true'がサムネールモードがアクティブ状態の場合のビューアの状態に対応し、selected='false'がメイン表示の初期設定の状態に対応します。

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

例 — 28 x 28ピクセルで、メインコントロールバーの下から4ピクセルおよび左端から5ピクセルの位置に配置し、選択時または未選択時のボタンの4つの状態ごとに異なる画像を表示するサムネールボタンを設定します。

.s7ecatalogsearchviewer .s7thumbnailpagebutton{ 
margin-top: 4px; 
margin-left: 5px; width:28px; 
 height:28px; 
} 
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='false'][state='up'] { 
background-image:url(images/v2/ThumbnailPageButton_dark_up.png); 
} 
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='false'][state='over'] { 
background-image:url(images/v2/ThumbnailPageButton_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='false'][state='down'] { 
background-image:url(images/v2/ThumbnailPageButton_dark_down.png); 
} 
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='false'][state='disabled'] { 
background-image:url(images/v2/ThumbnailPageButton_dark_disabled.png); 
} 
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='true'][state='up'] { 
background-image:url(images/v2/ThumbnailPageButton_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='true'][state='over'] { 
background-image:url(images/v2/ThumbnailPageButton_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='true'][state='down'] { 
background-image:url(images/v2/ThumbnailPageButton_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7thumbnailpagebutton [selected='true'][state='disabled'] { 
background-image:url(images/v2/ThumbnailPageButton_dark_disabled.png); 
}

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now