頁面檢視

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

主查看器區域的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; 
}

本頁內容