목차

마지막 업데이트: 2023-05-22
  • 주제:
  • Dynamic Media Classic
    이 항목에 대한 자세한 내용 보기
  • Viewers
    이 항목에 대한 자세한 내용 보기
  • SDK/API
    이 항목에 대한 자세한 내용 보기
  • eCatalog
    이 항목에 대한 자세한 내용 보기
  • 작성 대상:
  • Developer
    User

목차는 기본 컨트롤 막대에 있는 단추입니다. 활성화되면 페이지 인덱스 및 레이블 목록이 포함된 드롭다운 패널이 표시됩니다.

구성에 따라 목록에는 카탈로그에 있는 모든 페이지나 명시적 레이블이 정의된 페이지만 포함될 수 있습니다. 데스크탑 시스템에서는 목록이 사용 가능한 화면 부동산보다 긴 경우 오른쪽에 스크롤 막대가 표시됩니다.

뷰어 사용자 인터페이스에서 목차 버튼의 위치와 크기는 다음 CSS 클래스 선택기로 제어합니다.

.s7ecatalogviewer .s7tableofcontents

목차의 CSS 속성

여백-상단

컨트롤 막대의 위쪽에 있는 오프셋입니다.

왼쪽 여백

왼쪽에 있는 다음 단추까지의 거리 또는 한 행에 있는 첫 번째 단추인 경우 컨트롤 막대의 왼쪽입니다.

width

목차 버튼의 폭.

height

목차 버튼의 높이입니다.

background-image

지정된 단추 상태에 대해 표시되는 이미지입니다.

background-position

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다.

참조: CSS 스프라이트 .

노트

이 버튼은 state 속성 선택기: 다른 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다.

단추 도구 설명을 현지화할 수 있습니다. 다음을 참조하십시오 사용자 인터페이스 요소의 현지화 추가 정보.

예 - 기본 컨트롤 막대의 맨 아래에서 4픽셀, 왼쪽에서 43픽셀로 배치된 목차 단추를 설정합니다. 크기는 28 x 28픽셀이며 네 개의 서로 다른 버튼 상태에 대해 각각 다른 이미지가 표시됩니다.

.s7ecatalogviewer .s7tableofcontents {
margin-top: 4px;
margin-left: 10px; width: 28px;
 height: 28px;
}
.s7ecatalogviewer .s7tableofcontents[state='up'] {
background-image:url(images/v2/TableOfContents_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents[state='over'] {
background-image:url(images/v2/TableOfContents_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents[state='down'] {
background-image:url(images/v2/TableOfContents_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents[state='disabled'] {
background-image:url(images/v2/TableOfContents_dark_disabled.png);
}

드롭다운 패널의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

 .s7ecatalogviewer .s7tableofcontents .s7panel

드롭다운 패널의 CSS 속성

background-color

드롭다운 패널의 배경색입니다.

margin

패널 경계와 컨텐츠 간의 내부 오프셋입니다.

상자 그림자

패널 주위에 그림자를 그립니다.

노트

CSS에서 드롭다운 패널의 크기나 위치를 제어할 수 없습니다. 구성 요소는 레이아웃을 프로그래밍 방식으로 관리합니다.

예 - 반투명 검은색 배경, 콘텐츠 주위의 5픽셀 여백 및 그림자 효과가 있는 드롭다운 패널을 설정합니다.

.s7ecatalogviewer .s7tableofcontents .s7panel {
 background-color: rgba(0, 0, 0, 0.5);
 margin: 5px;
 box-shadow: 2px 2px 3px #c0c0c0;
}

개별 항목의 모양과 느낌은 다음 CSS 클래스 선택기로 제어합니다.

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7item

항목의 CSS 속성

font-family

글꼴 이름.

font-size

글꼴 크기입니다.

height

항목의 높이입니다.

패딩

내부 패딩.

노트

드롭다운 목록 항목은 state 속성 선택기: 마우스로 가리키거나 선택한 항목 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다.

예 - Helvetica® 14픽셀 글꼴과 19픽셀 높이의 드롭다운 항목을 설정합니다. 항목을 선택하면 마우스로 가리키고 밝은 회색 배경이 있는 어두운 회색 배경이 있습니다.

.s7ecatalogviewer .s7tableofcontents .s7panel .s7item {
font-family: Helvetica,sans-serif;
font-size: 14px;
height: 19px;
}
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item[state="over"] {
background-color: rgb(102, 102, 102);
}
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item[state="selected"] {
background-color: rgb(178, 178, 178);
}

페이지 인덱스를 표시하는 요소는 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index

페이지 인덱스의 CSS 속성

최소 폭

최소 요소 너비입니다.

최대 폭

최대 요소 너비입니다.

오른쪽 패딩

페이지 색인과 페이지 레이블 간의 거리입니다.

노트

를 설정하여 페이지 인덱스를 완전히 숨길 수 있습니다. display:none 대상: s7index CSS 클래스입니다.

예제 1 - 오른쪽에서 최소 너비가 40픽셀이고 최대 너비가 70픽셀이며 5픽셀 여백이 있는 페이지 인덱스를 설정합니다.

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index {
max-width: 70px;
min-width: 40px;
padding-right: 5px;
}

예제 2 - 페이지 인덱스 숨기기:

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index {
display: none;
}

페이지 레이블은 다음 CSS 클래스 선택기로 제어됩니다.

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7label

페이지 레이블의 CSS 속성

최소 폭

최소 요소 너비입니다.

최대 폭

최대 요소 너비입니다.

예 - 최소 너비는 40픽셀이고 최대 너비는 240픽셀인 페이지 인덱스를 설정합니다.

.s7ecatalogviewer .s7tableofcontents .s7panel .s7label {
min-width: 40px;
max-width: 240px;
}

드롭다운 패널 내에서 세로로 맞출 수 있는 것보다 많은 항목이 있고 시스템이 데스크탑인 경우 구성 요소는 패널의 오른쪽에 세로 스크롤 막대를 렌더링합니다. 스크롤 막대 영역의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7tableofcontents .s7scrollbar

스크롤 막대의 CSS 속성

width

스크롤 막대 폭입니다.

최상위

패널 영역의 위쪽에서 오프셋된 세로 스크롤 막대입니다.

하단

패널 영역 아래쪽에서 오프셋된 세로 스크롤 막대입니다.

오른쪽

패널 영역의 오른쪽 가장자리에서 오프셋된 가로 스크롤 막대입니다.

예 - 패널의 위쪽, 오른쪽 또는 아래쪽 영역에 여백이 없는 28픽셀 너비의 스크롤 막대를 설정합니다.

.s7ecatalogviewer .s7tableofcontents .s7scrollbar {
 top:0px;
 bottom:0px;
 right:0px;
 width:28px;
}

스크롤 막대 트랙은 위쪽 및 아래쪽 스크롤 단추 사이의 영역입니다. 이 구성 요소는 트랙의 위치와 높이를 자동으로 설정합니다. 트랙은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

스크롤 트랙의 CSS 속성

width

트랙 폭입니다.

background-color

트랙 배경색입니다.

예 - 폭이 28픽셀이고 배경이 반투명한 스크롤바 트랙을 설정합니다.

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

스크롤 막대 썸네일이 스크롤 트랙 영역 내에서 세로로 이동합니다. 수직 위치는 구성 요소 논리에 의해 제어됩니다. 그러나 썸네일 높이는 컨텐츠의 양에 따라 동적으로 변경되지 않습니다. 다음 CSS 클래스 선택기를 사용하여 썸네일 높이 및 기타 측면을 구성할 수 있습니다.

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

스크롤 막대 썸네일의 CSS 속성

width

썸네일 너비.

height

엄지 높이입니다.

padding-top

트랙 상단 사이의 수직 패딩입니다.

안쪽 여백-아래

트랙 하단 사이의 수직 패딩입니다.

background-image

지정된 썸네일 상태에 대해 표시되는 이미지입니다.

background-position

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다.

참조: CSS 스프라이트 .

노트

Thumb은 state 속성 선택기: 다른 스킨을 up, down, over, 및 disabled thumb states.

예 - 28 x 45픽셀이고 위쪽과 아래쪽에 10픽셀 여백이 있으며 각 상태에 대해 서로 다른 아트워크가 있는 스크롤 막대 썸을 설정합니다.

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb {
 width:28px;
 background-repeat:no-repeat;
 background-position:center;
 height:45px;
 padding-top:10px;
 padding-bottom:10px;
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='up'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='down'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='over'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}

다음 CSS 클래스 선택기를 사용하여 위쪽 및 아래쪽 스크롤 단추의 모양이 제어됩니다.

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton

CSS를 사용하여 스크롤 단추를 배치할 수 없습니다 top, left, bottom, 및 right 속성. 대신 뷰어 로직은 속성을 자동으로 배치합니다.

위로 스크롤 및 아래로 스크롤 단추의 CSS 속성

width

단추 너비입니다.

height

단추 높이입니다.

background-image

지정된 단추 상태에 대해 표시되는 이미지입니다.

background-position

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다.

참조: CSS 스프라이트 .

노트

버튼은 state 속성 선택기: 다른 스킨을 up, down, over, 및 disabled 단추 상태.

단추 도구 설명을 현지화할 수 있습니다. 다음을 참조하십시오 사용자 인터페이스 요소의 현지화 추가 정보.

예 - 28 x 32픽셀이며 각 상태에 대해 다른 아트웍이 있는 스크롤 단추를 설정합니다.

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}

이 페이지에서는