主視圖包含目錄映像。 可以滑動它來前往其他頁面或放大。
主查看器區域的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;
}