頁面檢視 page-view
主檢視包含目錄影像。 它可以輕掃以移至其他頁面或縮放。
主要檢視器區域的 CSS屬性
檢視區域的外觀是由下列CSS類別選取器所控制:
.s7ecatalogsearchviewer .s7pageview
CSS屬性
說明
背景色彩
主檢視的背景顏色(以十六進位格式)。
游標
顯示在主檢視上的游標。
範例 — 讓主檢視透明。
.s7ecatalogsearchviewer .s7pageview {
background-color: transparent;
}
在桌上型電腦系統上,元件支援cursortype
屬性選取器(可套用至.s7pageview
類別),並根據元件狀態和使用者動作控制游標型別。 支援下列cursortype
個值:
值
說明
預設
因影像解析度小、元件設定或兩者而造成影像無法縮放時顯示。
zoomin
當影像可以放大時顯示。
重設
當影像處於最大縮放等級時顯示,並可重設為初始狀態。
拖曳
當使用者平移處於放大狀態的影像時顯示。
張投影片
當使用者透過進行水準撥動或輕觸來執行影像交換時顯示。
視覺上可分隔目錄跨頁左右頁面的頁面分隔線,由下列CSS類別選取器控制:
.s7ecatalogsearchviewer .s7pageview .s7pagedivider
CSS屬性
說明
寬度
頁面分隔線的寬度。 設定為 0 畫素,以完全隱藏分隔線。
背景影像
您要做為頁面分隔線的影像。
範例 — 具有40畫素的寬分頁器,含半透明影像。
.s7ecatalogsearchviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
NOTE
當
frametransition
修飾元設為turn
或auto
(在案頭系統上)時,分頁器的外觀會以pageturnstyle
修飾元控制,而會忽略.s7pagedivider
CSS類別。您可在主要檢視器區域上設定自訂滑鼠游標顯示。 此功能由套用至.s7ecatalogsearchviewer .s7pageview
CSS類別的其他屬性選取器控制:
CSS屬性
說明
預設
通常是一個箭頭,會顯示不可縮放的影像。
zoomin
顯示影像何時可以放大。
重設
顯示影像何時達到最大縮放且可重設。
拖曳
顯示使用者何時對已縮放的影像執行拖曳操作
張投影片
顯示使用者使用投影片手勢執行影像交換的時間
範例 — 每種元件狀態型別都有不同的滑鼠游標。
.s7ecatalogsearchviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8