頁面檢視

主視圖包含目錄映像。 可以滑動它來前往其他頁面或放大。

主查看器區域的CSS屬性

查看區域的外觀由以下CSS類選擇器控制：

.s7ecatalogviewer .s7pageview

CSS屬性

說明

背景顏色

以十六進位格式顯示主視圖的背景顏色。

游標

顯示在主視圖上的游標。

示例 — 使主視圖透明。

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

在案頭系統上，此元件支援 cursortype 屬性選取器，可套用至 .s7pageview 類和根據元件狀態和用戶操作控制游標的類型。 以下 cursortype 值受支援：

值

說明

default

當影像因影像解析度小、元件設定或兩者皆無法縮放時顯示。

左敏

可放大影像時顯示。

重設

當影像處於最大縮放級別時顯示，可重置為初始狀態。

拖曳

當使用者平移處於縮放狀態的影像時顯示。

幻燈片

當用戶通過水準滑動或輕觸執行影像交換時顯示。

以視覺化方式分隔目錄跨頁的左和右頁面的分隔線，由下列CSS類別選取器控制：

.s7ecatalogviewer .s7pageview .s7pagedivider

CSS屬性

說明

width

頁面分隔線的寬度。 設為 0 px以完全隱藏分隔線。

背景 — 影像

您要用作分頁器的影像。

範例：若要有40像素寬的頁面分隔線，且具有半透明影像。

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

當 frametransition 修飾詞設定為 turn 或 auto （在案頭系統上），頁面分隔符的外觀會由 pageturnstyle 修飾詞和 .s7pagedivider CSS類被忽略。

可以在主查看器區域上配置自定義滑鼠游標的顯示。 此功能可透過套用至的其他屬性選取器來控制 .s7ecatalogviewer .s7pageview CSS類：

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

本頁內容