メインコントロールバー main-control-bar
メインコントロールバーは、デスクトップシステムおよびタブレット上の長方形の領域で、eCatalog Search ビューアで使用できるすべてのユーザーインターフェイスコントロール（大きなページボタンを除く）が含まれています。
携帯電話では、サムネール、目次、ダウンロード、印刷、お気に入り、ソーシャル共有、フルスクリーン、閉じるボタンが引き続き保持されます。 ただし、最初のページと最後のページのボタン、およびページインジケーターは、メインコントロールバーから削除され、代わりにセカンダリコントロールバーに追加されます。 デフォルトでは、メインコントロールバーは、デスクトップシステムおよび携帯電話のビューア領域の上部に表示され、タブレットのビューア領域の下部に移動します。 常に、使用可能なビューア全体の幅を使用します。 ビューアコンテナに対して、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
CSS スプライトを使用する場合は、アートワークスプライト内に配置します。
CSS スプライトも参照してください。
stateおよびselected属性セレクターをサポートしています。これらのセレクターを使用すると、異なるスキンを異なるボタンの状態に適用できます。 特に、state="selected"は、コントロールバーの内容を左にスクロールできる場合の最初のスクロールボタンの状態に対応します。 state="default"は、コンテンツが左側までスクロールされ、スクロールボタンが最初の状態に戻ることを提案する状態に対応します。ボタンツールのヒントはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 – 携帯電話のメインコントロールバーでスクロール機能を有効にするには。 また、64 x 64 ピクセルのスクロールボタンを設定します。このボタンを選択した場合と選択しなかった場合は、4つのボタンの状態ごとに異なる画像が表示されます。
.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);
}