頁面檢視

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

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