ページ表示

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

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

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

.s7ecatalogviewer .s7pageview

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

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

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

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

.s7ecatalogviewer .s7pageview .s7pagedivider

例 — 幅が40ピクセルで、半透明の画像を使用したページ区切りを設定します。

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

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

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

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