목차

목차는 기본 컨트롤 모음에 있는 단추입니다. 활성화되면 페이지 인덱스 및 레이블 목록이 있는 드롭다운 패널이 나타납니다.

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

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

.s7ecatalogviewer .s7tableofcontents

목차의 CSS 속성

여백 상단

컨트롤 막대의 상단으로부터 오프셋입니다.

왼쪽 여백

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

width

목차 단추의 폭입니다.

height

목차 단추의 높이입니다.

배경 이미지

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

배경 위치

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

CSS Sprite 도 참조하십시오.

노트

이 버튼은 state 속성 선택기를 지원하며, 이 선택기를 사용하여 다른 스킨을 다른 단추 상태에 적용할 수 있습니다.

단추 도구 팁은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소 현지화를 참조하십시오.

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

.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 속성

배경색

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

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

글꼴 크기입니다.

높이

항목의 높이입니다.

패딩

내부 패딩.

노트

드롭다운 목록 항목은 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 속성

min-width

최소 요소 너비입니다.

최대 너비

최대 요소 너비입니다.

오른쪽 패딩

페이지 색인과 페이지 레이블 사이의 거리.

노트

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

예 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 속성

min-width

최소 요소 너비입니다.

최대 너비

최대 요소 너비입니다.

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

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

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

.s7ecatalogviewer .s7tableofcontents .s7scrollbar

스크롤 막대의 CSS 속성

너비

스크롤 막대 폭입니다.

최상위

패널 영역 상단에서 오프셋된 세로 스크롤 막대형

하단

패널 영역의 아래쪽에서 오프셋되는 세로 스크롤 막대

오른쪽

패널 영역의 오른쪽 가장자리로부터 오프셋된 가로 스크롤 막대.

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

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

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

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

스크롤 트랙의 CSS 속성

너비

트랙 폭입니다.

배경색

트랙 배경색입니다.

예 - 폭이 28픽셀이고 반투명 회색 배경이 있는 스크롤 막대 트랙을 설정합니다.

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

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

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

스크롤 막대 경험의 CSS 속성

너비

엄지 폭.

높이

엄지 높이.

패딩 탑

트랙 위쪽 사이의 수직 안쪽 여백입니다.

패딩 하단

트랙 아래쪽 사이의 수직 안쪽 여백입니다.

배경 이미지

주어진 경험 상태에 대해 표시되는 이미지입니다.

배경 위치

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

CSS Sprite 도 참조하십시오.

노트

Thumb은 state 속성 선택기를 지원합니다. 이 선택기는 up, down, overdisabled thumb 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다.

예 - 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, bottomright 속성을 사용하여 스크롤 단추를 배치할 수 없습니다. 대신 뷰어 논리는 자동으로 위치를 지정합니다.

위로 스크롤하여 아래로 스크롤하는 단추의 CSS 속성

너비

단추 너비입니다.

높이

단추 높이입니다.

배경 이미지

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

배경 위치

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

CSS Sprite 도 참조하십시오.

노트

버튼은 state 속성 선택기를 지원합니다. 이 선택기는 up, down, overdisabled 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다.

단추 도구 팁은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소 현지화를 참조하십시오.

예 - 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); 
}

이 페이지에서는