設定指示符

設定指標是檢視器底部呈現的一系列點。 它顯示集內的當前位置。

set指示符的CSS屬性

使用下列CSS類別選擇器控制設定指標容器的外觀：

.s7carouselviewer .s7setindicator

CSS屬性

說明

背景色

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

注意

設定指示符支援模式屬性選擇器，可用於為虛線和數字操作模式應用不同的樣式。 具體來說，mode="numeric"對應於數字操作模式；mode="dotted"對應於預設點狀態。

示例——要設定具有白色背景的設定指示符：

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

使用CSS類別選擇器控制個別設定指標點的外觀。 它適用於點狀和數字操作模式中的項目。

.s7carouselviewer .s7setindicator .s7dot

CSS屬性

說明

width

設定指示器點的寬度。

height

設定指示點的高度。

左邊距

左邊界（以像素為單位）。

邊距頂端

上邊界（以像素為單位）。

邊界右側

右邊距（像素）。

邊距——底部

底部邊界（以像素為單位）。

邊框半徑

邊框半徑（像素）。

背景色

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

font-family

字型名稱。

字型大小

字型大小。

color

字型顏色。

垂直對齊

橫幅索引的垂直對齊。

線高

橫幅索引的文字高度。

注意

設定指標項目支援state屬性選擇器，可用來將不同的外觀套用至不同的縮圖狀態。 特別是state="selected"對應於集合中的當前元素；state="unselected"對應於預設項目狀態。

範例——以點狀模式設定指示符，讓案頭系統從檢視器底部放置20像素。 未選取的點是黑色，具有50%的透明度，15 x 15像素，7像素為圓角。 選取的點是黑色，具有90%的透明度、18 x 18像素和9像素的圓角。 點之間的間距為5像素。

.s7carouselviewer.s7mouseinput .s7setindicator { 
 bottom: 20px; 
} 
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot{ 
 width:15px; 
 height:15px; 
 margin-left:2.5px; 
 margin-right:2.5px; 
 margin-top:2.5px; 
 margin-bottom:2.5px; 
} 
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='selected'] {  
 width:18px; 
 height:18px; 
 background-color: #000000; 
 opacity: 0.9; 
 border-radius:9px; 
} 
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='unselected'] {  
 width:15px; 
 height:15px; 
 background-color: #000000; 
 opacity: 0.5; 
 border-radius:7px; 
}

本頁內容