メインコントロールバー

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

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

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

.s7ecatalogviewer .s7controlbar

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

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

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

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

.s7ecatalogviewer .s7controlbar .s7innercontrolbarcontainer

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

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

.s7ecatalogviewer .s7controlbar .s7scrollbuttoncontainer

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

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

.s7ecatalogviewer .s7controlbar .s7scrollleftrightbutton

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

例 — 携帯電話のメインコントロールバーでスクロール機能を有効にするには また、64 x 64 ピクセルで、選択時または未選択時の 4 つのボタンの状態ごとに異なる画像を表示するスクロールボタンを設定します。

.s7ecatalogviewer.s7size_small .s7controlbar .s7innercontrolbarcontainer {
 position: absolute;
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollbuttoncontainer {
 width:64px;
 background-color: rgb(0, 0, 0);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton {
 width:64px;
 height:64px;
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='up'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_up_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='over'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_over_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='down'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_down_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='disabled'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_disabled_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='up'] {
 background-image:url(images/v2/ControlBarRightButton_dark_up_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='over'] {
 background-image:url(images/v2/ControlBarRightButton_dark_over_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='down'] {
 background-image:url(images/v2/ControlBarRightButton_dark_down_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='disabled'] {
 background-image:url(images/v2/ControlBarRightButton_dark_disabled_touch.png);
}

Business.Adobe.com リソース

Multichannel Communication Ecommerce Integrations Cms Cloud Mobile Forms Theme Editor Customer Experience Management