メインコントロールバー

メインコントロールバーは、デスクトップシステムおよびタブレットの矩形の領域で、eCatalog検索ビューアで使用できるすべてのユーザインターフェイスコントロール(大きいページボタンを除く)が含まれます。

携帯電話では、サムネール、目次、ダウンロード、印刷、お気に入り、ソーシャルシェア、フルスクリーン、閉じるボタンが保持されます。 ただし、最初のページボタン、最後のページボタン、ページインジケーターは、メインコントロールバーから削除され、代わりにセカンダリコントロールバーに追加されます。 デフォルトでは、メインコントロールバーはデスクトップシステムおよび携帯電話ではビューア領域の上部に表示され、タブレットではビューア領域の下部に移動されます。 常に、ビューアの幅いっぱいに表示されます。 CSS内での、ビューアのコンテナに対するカラー、高さおよび垂直方向の位置を変更できます。

メインコントロールバーの外観は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7controlbar

CSSプロパティ

説明

トップ

ビューアの上端からの位置。

ビューアの下端からの位置。

height

メインコントロールバーの高さ。

background-color

メインコントロールバーの背景色。

— 高さが36ピクセルで、ビューアコンテナの上部に配置するグレーのメインコントロールバーを設定します。

.s7ecatalogsearchviewer .s7controlbar { 
 top: 0px; 
 height: 36px; 
 background-color: rgba(0, 0, 0, 0.5); 
}

メインコントロールバーでは、オプションのスクロール機能がサポートされています。 ビューアの幅が小さすぎて、コントロールバーのすべてのボタンプリセットに収まるスペースがない場合は、アクティブになります。 この場合、コントロールバーの右側に2つの状態を持つ矢印ボタンが表示されます。 このボタンをクリックまたはタップすると、スクロールボタンの状態に応じて、すべてのコントロールバー要素が左または右にスクロールします。 この機能の主な使用例は、縦長の小さい画面を持つモバイルデバイスです。

スクロール機能は、メインコントロールバーに対して有効になり、セカンダリコントロールバーに対しては無効になります。 この機能のオン/オフは、以下のCSSクラスセレクターを使用して切り替えます。

.s7ecatalogsearchviewer .s7controlbar .s7innercontrolbarcontainer

CSSプロパティ

説明

position

static に設定すると、スクロール機能は無効になります。

このプロパティを絶対に設定すると、スクロール機能が有効になります。

特別なコンテナ要素にスクロールボタンを追加しました。この要素を使用すると、ボタンの位置を適切に決め、スクロールボタンの高さがコントロールバーの高さよりも小さい場合に、コントロールバーの背景の他の部分とは異なるスタイルを設定できます。

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

.s7ecatalogsearchviewer .s7controlbar .s7scrollbuttoncontainer

CSSプロパティ

説明

width

通常は、スクロールボタン自体の幅と同じかそれ以上にする必要があります。

background-color

コンテナの背景色。

スクロールボタン自体のサイズ設定とスキン設定は、CSSを使用して行うことができます。

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

.s7ecatalogsearchviewer .s7controlbar .s7scrollleftrightbutton

CSSプロパティ

説明

width

ボタンの幅。

height

ボタンの高さ。

background-image

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

background-position

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

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

メモ

このボタンでは、stateおよびselected属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。 特に、state="selected"は、コントロールバーの内容を左にスクロールできる場合の初期スクロールボタンの状態に対応します。state="default"は、コンテンツを左端までスクロールしたときの状態に対応し、スクロールボタンからは初期状態に戻すように指示されます。

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

— 携帯電話のメインコントロールバーのスクロール機能を有効にし、選択時または未選択時のボタンの4つの状態ごとに異なる画像を表示する64 x 64ピクセルのスクロールボタンを設定します。

.s7ecatalogsearchviewer.s7size_small .s7controlbar .s7innercontrolbarcontainer { 
 position: absolute; 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollbuttoncontainer { 
 width:64px; 
 background-color: rgb(0, 0, 0); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton { 
 width:64px; 
 height:64px; 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='up'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_up_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='over'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_over_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='down'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_down_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='disabled'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_disabled_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='up'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_up_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='over'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_over_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='down'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_down_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='disabled'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_disabled_touch.png); 
}

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
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