設定指示器

設定指示器是在觸摸設備上使用查看器時在色板上呈現的一系列點。 當捲動按鈕無法使用時，點可協助使用者瀏覽縮圖的頁面。

設定指標的CSS屬性

使用以下CSS類選擇器控制設定指示符容器的外觀：

.s7zoomviewer .s7setindicator

CSS屬性

說明

背景顏色

設定指示器的十六進位格式的背景顏色。

範例 — 若要建立具有白色背景的設定指標：

.s7zoomviewer .s7setindicator {
 background-color: #FFFFFF;
}

使用CSS類選擇器控制單個設定指示符點的外觀：

.s7zoomviewer .s7setindicator .s7dot

CSS屬性

說明

width

設定指示點的寬度。

height

設定指示器點的高度。

左邊距

左邊距（像素）。

邊距上

上邊界（像素）。

邊距 — 右

右邊距（像素）。

邊距 — 底部

底邊界（像素）。

邊框半徑

邊框半徑（像素）。

背景顏色

以十六進位格式表示的背景顏色。

注意

設定指示器點支援 state 屬性選取器，可用來將不同外觀套用至不同的縮圖狀態。 特別是， state="selected" 與縮圖的目前頁面相對應， state="unselected" 與預設點狀態對應。

示例 — 要建立一個設定指示點，使其為15 x 15像素，具有2個像素水準邊距、5個像素頂邊距、1個像素底邊距、12個像素半徑、#D5D3D3預設顏色和#939393用顏色：

.s7zoomviewer .s7setindicator .s7dot {
 width:15px;
 height:15px;
 margin-left:2px;
 margin-top:5px;
 margin-right:2px;
 margin-bottom:1px;
 border-radius:12px;
 background-color:#D5D3D3;
}
.s7zoomviewer .s7setindicator .s7dot[state="selected"] {
 background-color:#939393;
}

本頁內容