ページビュー

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

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

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

.s7ecatalogviewer .s7pageview

CSSプロパティ

説明

background-color

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

cursor

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

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

.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; 
}

このページ