표시기 설정 set-indicator

세트 표시기는 뷰어가 터치 디바이스에서 사용될 때 견본 위에 렌더링되는 일련의 점입니다. 점을 사용하면 스크롤 단추를 사용할 수 없을 때 사용자가 썸네일 페이지를 탐색할 수 있습니다.

집합 표시기의 CSS 속성

다음 CSS 클래스 선택기를 사용하여 설정된 표시기 컨테이너의 모양이 제어됩니다.

.s7zoomviewer .s7setindicator
CSS 속성
설명
배경색
설정 표시기의 16진수 형식 배경색입니다.

예 - 흰색 배경에 세트 표시기를 만들려면:

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

개별 세트 표시기 점의 모양은 CSS 클래스 선택기를 사용하여 제어됩니다.

.s7zoomviewer .s7setindicator .s7dot

CSS 속성
설명
너비
설정된 표시기 점의 폭입니다.
높이
설정된 표시점의 높이입니다.
여백-왼쪽
왼쪽 여백(픽셀).
여백-상단
상단 여백(픽셀).
여백-오른쪽
오른쪽 여백(픽셀 단위).
여백-하단
아래 여백(픽셀).
border-radius
테두리 반경(픽셀).
배경색
16진수 형식의 배경색입니다.
NOTE
표시 점 설정은 state 특성 선택기를 지원하며, 이 선택기를 사용하여 다른 썸네일 상태에 다른 스킨을 적용할 수 있습니다. 특히 state="selected"은(는) 썸네일의 현재 페이지에 해당하며 state="unselected"은(는) 기본 점 상태에 해당합니다.

예 - 2픽셀 수평 여백, 5픽셀 상단 여백, 1픽셀 하단 여백, 12픽셀 반경, 기본 색상 및 #939393 활성 색상을 사용하여 15x15픽셀#D5D3D3 설정된 표시기 점을 만들려면 다음 작업을 수행하십시오.

.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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8