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