頁面檢視

主視圖由目錄影像組成。 您可以滑動它以移至其他頁面或縮放。

主檢視器區域的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; 
}

本頁內容