ページビュー

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

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

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

.s7ecatalogviewer .s7pageview

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

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

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