メインコントロールバー

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

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

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

.s7ecatalogsearchviewer .s7controlbar

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

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

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

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

.s7ecatalogsearchviewer .s7controlbar .s7innercontrolbarcontainer

スクロールボタンは、ボタンを適切に配置する特殊なコンテナ要素に追加されます。スクロールボタンの高さがコントロールバーの高さより小さい場合は、コントロールバーの背景の他の部分とは異なるスタイルでボタンの周囲の領域を設定できます。

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

.s7ecatalogsearchviewer .s7controlbar .s7scrollbuttoncontainer

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

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

.s7ecatalogsearchviewer .s7controlbar .s7scrollleftrightbutton

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

例 — 携帯電話のメインコントロールバーでスクロール機能を有効にし、選択時または未選択時の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); 
}