ページビュー

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

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

表示領域の外観は、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogviewer .s7pageview

CSS プロパティ

説明

background-color

16 進数形式のメインビューの背景色。

カーソル

メインビュー上に表示されるカーソル。

例 — メインビューを透明にするには、次のように記述します。

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

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

値

説明

デフォルト

画像の解像度が小さい、コンポーネントの設定、またはその両方の理由で画像がズームできない場合に表示されます。

zoomin

画像がズームイン可能な場合に表示されます。

リセット

画像が最大ズームレベルで、初期状態にリセットできる場合に表示されます。

ドラッグ

ユーザーがズームイン状態の画像をパンしたときに表示されます。

スライド

ユーザーが水平方向のスワイプまたはフリックを実行して画像の入れ替えを実行した場合に表示されます。

カタログ見開きの左右のページを視覚的に区切るページ区切りは、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogviewer .s7pageview .s7pagedivider

CSS プロパティ

説明

width

ページ区切りの幅。 に設定 0 px を指定すると、区切りが完全に非表示になります。

background-image

ページ区切りとして使用する画像。

例 — 幅が 40 ピクセルで、半透明の画像を含むページ区切りを使用する場合。

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

次の場合に frametransition 修飾子が次の値に設定されている turn または auto （デスクトップシステムの場合）ページ区切りの外観は、 pageturnstyle 修飾子と .s7pagedivider CSS クラスは無視されます。

メインビューア領域上でのカスタムマウスカーソルの表示を設定できます。 この機能は、 .s7ecatalogviewer .s7pageview CSS クラス：

CSS プロパティ

説明

デフォルト

通常は矢印で、ズーム不可の画像に対して表示されます。

zoomin

いつ画像がズームインできるかを表示します。

リセット

画像が最大ズームに達し、リセット可能な場合に表示されます。

ドラッグ

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

スライド

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

例 — コンポーネントの状態のタイプごとに異なるマウスカーソルを持ちます。

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

このページ