設定指標是在觸控裝置上使用檢視器時,在色票上彩現的一系列點。 無法使用捲動按鈕時,圓點可協助使用者瀏覽縮圖頁面。
設定指標的CSS屬性
設定指示器容器的外觀是由下列CSS類別選取器所控制:
.s7zoomviewer .s7setindicator
CSS屬性 |
說明 |
---|---|
background-color |
設定指示器的十六進位格式的背景顏色。 |
範例 — 若要建立具有白色背景的設定指標:
.s7zoomviewer .s7setindicator {
background-color: #FFFFFF;
}
個別設定指標點的外觀是由CSS類別選取器所控制:
.s7zoomviewer .s7setindicator .s7dot
CSS屬性 |
說明 |
---|---|
width |
設定指標點的寬度。 |
height |
設定指標點的高度。 |
左邊界 |
以畫素為單位的左側邊界。 |
頂端邊界 |
上邊界(畫素)。 |
右邊界 |
以畫素為單位的右邊界。 |
下方邊界 |
下方邊界(畫素)。 |
border-radius |
邊框半徑(畫素)。 |
background-color |
以十六進位格式表示的背景顏色。 |
設定指標點支援 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;
}