ページビュー page-view
メインビューは、カタログ画像で構成されます。 スワイプして別のページに移動したり、ズームしたりできます。
メインビューア領域の CSS プロパティ
表示領域の外観は、以下の CSS クラスセレクターを使用して制御します。
.s7ecatalogsearchviewer .s7pageview
CSS プロパティ
説明
background-color
16 進数形式のメインビューの背景色。
カーソル
メインビュー上に表示されるカーソル。
例 — メインビューを透明にするには、次のように記述します。
.s7ecatalogsearchviewer .s7pageview {
background-color: transparent;
}
デスクトップシステムでは、コンポーネントは、 cursortype 適用可能な属性セレクター .s7pageview クラスを参照し、コンポーネントの状態とユーザーアクションに基づいて、カーソルのタイプを制御します。 以下 cursortype の値はサポートされています。
値
説明
デフォルト
画像の解像度が小さい、コンポーネントの設定、またはその両方の理由で画像がズームできない場合に表示されます。
zoomin
画像がズームイン可能な場合に表示されます。
リセット
画像が最大ズームレベルで、初期状態にリセットできる場合に表示されます。
ドラッグ
ユーザーがズームイン状態の画像をパンしたときに表示されます。
スライド
ユーザーが水平方向のスワイプまたはフリックを実行して画像の入れ替えを実行した場合に表示されます。
カタログ見開きの左右のページを視覚的に区切るページ区切りは、以下の CSS クラスセレクターを使用して制御します。
.s7ecatalogsearchviewer .s7pageview .s7pagedivider
CSS プロパティ
説明
width
ページ区切りの幅。 に設定 0 px を指定すると、区切りが完全に非表示になります。
background-image
ページ区切りとして使用する画像。
例 — 幅が 40 ピクセルで、半透明の画像を含むページ区切りを設定するには、次のように記述します。
.s7ecatalogsearchviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
NOTE
次の場合に
frametransition 修飾子が次の値に設定されている turn または auto （デスクトップシステムの場合）ページ区切りの外観は、 pageturnstyle 修飾子と .s7pagedivider CSS クラスは無視されます。メインビューア領域上でのカスタムマウスカーソルの表示を設定できます。 この機能は、 .s7ecatalogsearchviewer .s7pageview CSS クラス：
CSS プロパティ
説明
デフォルト
通常は矢印で、ズーム不可の画像に対して表示されます。
zoomin
いつ画像がズームインできるかを表示します。
リセット
画像が最大ズームに達し、リセット可能な場合に表示されます。
ドラッグ
ユーザーがズームインされた画像に対してドラッグ操作を実行したときに表示されます
スライド
ユーザーがスライドジェスチャを使用して画像の入れ替えを実行したときに表示されます
例 — コンポーネントの状態のタイプごとに異なるマウスカーソルを持ちます。
.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
b7426f53-aad9-4c00-83fc-664f30f681e8