ページ表示

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

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

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

.s7ecatalogviewer .s7pageview

CSSプロパティ

説明

background-color

16進数形式のメイン表示の背景色。

cursor

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

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

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

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

値

説明

デフォルト

画像解像度が低い、コンポーネントの設定またはその両方が原因で画像がズーム可能でない場合に表示されます。

zoomin

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

リセット

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

ドラッグ

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

slide

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

カタログ見開きの左右のページを視覚的に区切るページ区切りは、以下の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

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

リセット

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

ドラッグ

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

slide

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

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

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

このページ