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