メインコントロールバー

メインコントロールバーは、デスクトップシステムおよびタブレットの矩形の領域で、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); 
}

このページ