主視圖由目錄影像組成。 您可以滑動它以移至其他頁面或縮放。
主檢視器區域的CSS屬性
檢視區域的外觀會使用下列CSS類別選擇器加以控制:
.s7ecatalogsearchviewer .s7pageview
CSS屬性 |
說明 |
---|---|
背景色 |
以十六進位格式顯示主視圖的背景顏色。 |
游標 |
顯示在主視圖上的游標。 |
示例——使主視圖透明。
.s7ecatalogsearchviewer .s7pageview {
background-color: transparent;
}
在案頭系統上,元件支援cursortype
屬性選擇器,該選擇器可應用於.s7pageview
類,並基於元件狀態和用戶操作控制游標的類型。 支援下列cursortype
值:
值 |
說明 |
---|---|
default |
當影像因影像解析度小、元件設定或兩者皆無法縮放時顯示。 |
牛 |
可放大影像時顯示。 |
重設 |
當影像處於最大縮放層級時顯示,並可重設為初始狀態。 |
拖曳 |
當使用者平移處於縮放狀態的影像時顯示。 |
投影片 |
當使用者透過水準滑動或輕拂來執行影像切換時顯示。 |
以視覺化方式分隔目錄跨頁的左和右頁面的分頁線,由下列CSS類別選擇器控制:
.s7ecatalogsearchviewer .s7pageview .s7pagedivider
CSS屬性 |
說明 |
---|---|
width |
頁面分隔線的寬度。 設為 0 px可完全隱藏分隔線。 |
背景影像 |
您要用作分頁符的影像。 |
範例——使用半透明影像來製作40像素寬的分頁線。
.s7ecatalogsearchviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
當frametransition
修飾元設為turn
或auto
(在案頭系統上)時,頁面分隔線的外觀會由pageturnstyle
修飾元控制,並忽略.s7pagedivider
CSS類別。
您可以在主檢視器區域上設定自訂滑鼠游標的顯示。 這是由套用至.s7ecatalogsearchviewer .s7pageview
CSS類別的其他屬性選擇器所控制:
CSS屬性 |
說明 |
---|---|
預設 |
通常是箭頭,針對不可縮放的影像顯示。 |
牛 |
顯示影像何時可放大。 |
重設 |
顯示影像在最大縮放時可重設的時間。 |
拖曳 |
顯示使用者在影像中縮放時執行拖曳作業的時間 |
投影片 |
顯示使用者何時使用投影片手勢執行影像交換 |
示例——每種類型的元件狀態有不同的滑鼠游標。
.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;
}