フルスクリーンボタン full-screen-button
ユーザーが選択すると、ビューアがフルスクリーンモードに入るか、終了します。 このボタンは、メインコントロールバーに表示されます。 ビューアがポップアップモードで動作し、システムがネイティブのフルスクリーンをサポートしていない場合、このボタンは表示されません。 ボタンのサイズ、スキン、位置をCSSで指定できます。
メイン ビューア領域のCSS プロパティ
ボタンの外観は、次のCSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7fullscreenbutton
CSS プロパティ
説明
上位
パディングを含むメインコントロールバーの上端からの位置。
右
パディングを含むメインコントロールバーの右端からの位置。
さんがを残しました
パディングを含むメインコントロールバーの左端からの位置。
下
パディングを含むメインコントロールバーの下端からの位置。
幅
ボタンの幅。
の高さ
ボタンの高さ。
背景画像
特定のボタン状態に対して表示される画像。
background-position
CSS スプライトを使用する場合は、アートワークスプライト内に配置します。
CSS スプライトも参照してください。
NOTE
このボタンは、
stateとselectedの両方の属性セレクターをサポートしており、異なるスキンを異なるボタンの状態に適用するために使用できます。 特に、selected='true'は「フルスクリーン」状態に対応し、selected='false'は「通常」状態に対応します。ボタンツールのヒントはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 – 28 x 28 ピクセルで、メインコントロールバーの下端から4 ピクセル、右端から5 ピクセルに配置されたフルスクリーンボタンを設定します。 最後に、選択または選択されていない4つの異なるボタンの状態ごとに異なる画像が表示されます。
.s7ecatalogsearchviewer .s7fullscreenbutton {
bottom:4px;
right:5px;
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7ecatalogsearchviewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}
recommendation-more-help
dynamic-media-developer-resources-help-aem-viewers-ref