ページビュー

最終更新日： 2024年7月22日

トピック：

作成対象：

開発者
ユーザー

メインビューは、カタログ画像で構成されます。スワイプして別のページに移動したり、ズームしたりできます。

メインビューア領域の CSS プロパティ

表示領域の外観は、次の CSS クラスセレクターで制御します。

.s7ecatalogsearchviewer .s7pageview

CSS プロパティ	説明
の背景色の	メインビューの背景色（16 進数形式）。
cursor	メインビューに表示されるカーソル。

例 – メインビューを透明にする。

.s7ecatalogsearchviewer .s7pageview {
 background-color: transparent;
}

デスクトップシステムでは、コンポーネントは、クラスに適用できる cursortype 属性セレクター .s7pageview サポートしており、コンポーネントの状態とユーザーアクションに基づいてカーソルのタイプを制御します。次の cursortype 値がサポートされています。

値	説明
default	画像の解像度が低い、コンポーネント設定がある、またはその両方が原因で画像をズームできない場合に表示されます。
zoomin	画像をズームインできる場合に表示されます。
reset	画像が最大ズームレベルにあり、初期状態にリセットできる場合に表示されます。
ドラッグ	ズームイン状態の画像をユーザーがパンすると表示されます。
スライド	ユーザーが水平方向のスワイプまたはフリックを行って画像の入れ替えを実行すると表示されます。

カタログスプレッドの左右のページを視覚的に区切るページディバイダーは、次の CSS クラスセレクターで制御します。

.s7ecatalogsearchviewer .s7pageview .s7pagedivider

CSS プロパティ	説明
幅	ページ区切りの幅。ディバイダーを完全に非表示にするには、 0 px に設定します。
background-image	ページディバイダーとして使用する画像。

例 – 幅 40 ピクセルのページディバイダーを半透明の画像で使用する。

.s7ecatalogsearchviewer .s7pageview .s7pagedivider {
 width:40px;
 background-image:url(images/sdk/divider.png);
}

NOTE

frametransition 修飾子が turn または auto （デスクトップシステム上）に設定されている場合、ページディバイダーの外観は pageturnstyle 修飾子で制御され、.s7pagedivider CSS クラスは無視されます。

メインビューア領域でのカスタムマウスカーソルの表示を設定できます。この機能は、CSS クラスに適用される追加の属性セレクターで制御 .s7ecatalogsearchviewer .s7pageview れます。

CSS プロパティ

説明

default

通常、矢印はズームできない画像を示します。

zoomin

画像をズームインできるタイミングを表示します。

reset

画像が最大ズーム時を示し、リセット可能です。

ドラッグ

ユーザーがズームインされた画像にドラッグ操作を実行すると表示されます

スライド

ユーザーがスライドジェスチャを使用して画像の入れ替えを実行したときに表示します

例 – コンポーネントの状態のタイプごとに異なるマウスカーソルがある

.s7ecatalogsearchviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}

recommendation-more-help