メインコントロールバーは、デスクトップシステムおよびタブレットの長方形の領域で、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 |
に設定する場合 静的 スクロール機能は無効です。 このプロパティをに設定します。 絶対 をクリックして、スクロール機能を有効にします。 |
スクロールボタンは、ボタンを適切に配置する特別なコンテナ要素に追加されます。 スクロールボタンの高さがコントロールバーの高さより小さい場合に、コントロールバーの背景の他の部分とは異なるスタイルでボタンの周囲の領域を設定できます。
このスクロールボタンコンテナの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7ecatalogsearchviewer .s7controlbar .s7scrollbuttoncontainer
CSS プロパティ |
説明 |
---|---|
width |
通常は、スクロールボタン自体の幅と等しいか、それより大きい値を設定する必要があります。 |
background-color |
コンテナの背景色。 |
CSS を使用して、スクロールボタン自体のサイズを設定したり、スキンを設定したりできます。
このボタンの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7ecatalogsearchviewer .s7controlbar .s7scrollleftrightbutton
CSS プロパティ |
説明 |
---|---|
幅 |
ボタンの幅。 |
高さ |
ボタンの高さ。 |
background-image |
ボタンの特定の状態に対して表示される画像。 |
background-position |
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);
}