主檢視由目錄影像組成。 它可以輕掃以進入另一個頁面或縮放。
主要檢視器區域的CSS屬性
檢視區域的外觀是由下列CSS類別選取器所控制:
.s7ecatalogviewer .s7pageview
CSS屬性 |
說明 |
---|---|
background-color |
主檢視的背景顏色(以十六進位格式)。 |
游標 |
顯示在主檢視上的游標。 |
範例 — 讓主檢視透明。
.s7ecatalogviewer .s7pageview {
background-color: transparent;
}
在桌上型電腦系統上,元件支援 cursortype
可套用到的屬性選擇器 .s7pageview
類別並根據元件狀態和使用者動作控制游標型別。 下列專案 cursortype
支援的值:
值 |
說明 |
---|---|
default |
因影像解析度小、元件設定或兩者而不可縮放時顯示。 |
縮放 |
影像可放大時顯示。 |
重設 |
當影像處於最大縮放等級時顯示,並可重設為初始狀態。 |
拖曳 |
當使用者平移處於已縮放狀態的影像時顯示。 |
幻燈片 |
當使用者執行水準撥動或輕觸來執行影像交換時顯示。 |
視覺上分隔目錄跨頁左右頁面的頁面分隔線,由下列CSS類別選取器控制:
.s7ecatalogviewer .s7pageview .s7pagedivider
CSS屬性 |
說明 |
---|---|
width |
頁面分隔線的寬度。 設定為 0 px以完全隱藏分隔線。 |
background-image |
您要用作頁面分隔線的影像。 |
範例 — 具有40畫素的寬分頁器,且影像為半透明。
.s7ecatalogviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
當 frametransition
修飾元設為 turn
或 auto
(在桌上型電腦系統上),分頁器的外觀是由 pageturnstyle
修飾元與 .s7pagedivider
已忽略CSS類別。
您可在主要檢視器區域上設定自訂滑鼠游標顯示。 此功能由套用到的其他屬性選擇器控制 .s7ecatalogviewer .s7pageview
CSS類別:
CSS屬性 |
說明 |
---|---|
default |
通常為箭頭,會顯示不可縮放的影像。 |
縮放 |
顯示何時可以放大影像。 |
重設 |
顯示影像何時達到最大縮放並可重設。 |
拖曳 |
顯示使用者何時對已縮放的影像執行拖曳操作 |
幻燈片 |
顯示使用者使用投影片手勢執行影像交換的時間 |
範例 — 每種元件狀態的滑鼠游標型別不同。
.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;
}