축소판

썸네일은 썸네일 이미지 그리드로 구성되며 오른쪽에 수직 스크롤을 허용하는 선택적 스크롤 막대가 있습니다.

축소판은 기본 컨트롤 막대에서 축소판 단추를 클릭하여 전환됩니다. 썸네일이 활성화되면 뷰어 사용자 인터페이스 맨 위에 오버레이된 모달 모드로 표시됩니다. 뷰어 로직은 자동으로 썸네일 컨테이너의 크기를 전체 뷰어 영역으로 조정합니다.

썸네일 컨테이너의 모양은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.

.s7ecatalogsearchviewer .s7thumbnailgridview

예 - 썸네일을 상단에서 32픽셀 오프셋하고, 왼쪽과 오른쪽에 5픽셀 여백, 하단에 8픽셀 여백을 두도록 설정합니다. 0xDDDDDD 배경.

.s7ecatalogsearchviewer .s7thumbnailgridview {
 top: 32px;
 margin-left: 5px;
 margin-right: 5px;
 margin-bottom: 8px;
 background-color: rgb(221, 221, 221);
}

썸네일 간의 간격은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell

예 - 세로 및 가로로 모두 10픽셀 공간을 설정합니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell {
 margin: 5px;
}

개별 썸네일의 모양은 다음 CSS 클래스 선택기로 제어합니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

터치 디바이스에서 세로 모드로 회전할 때 뷰어는 카탈로그 스프레드를 개별 페이지로 분할하기로 결정하는 경우 구성된 것의 절반까지 썸네일의 크기를 조정할 수 있습니다.

예 - 120 x 85픽셀인 썸네일을 설정하려면 흰색 배경, 밝은 회색 표준 테두리 및 어두운 회색으로 선택한 테두리를 사용합니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb {
 width:120px;
 height:85px;
 background-color: rgb(255, 255, 255);
 border: solid 1px #999999;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb[state="selected"]{
 border: solid 2px #666666;
}

썸네일 레이블의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label

예 - 14픽셀 Helvetica® 글꼴을 사용하도록 레이블을 설정합니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label {
 font-family: Helvetica,sans-serif;
 font-size: 12px;
}

보기에 수직으로 맞출 수 있는 것보다 많은 썸네일이 있는 경우 썸네일은 오른쪽에 있는 세로 스크롤 막대를 렌더링합니다. 다음 CSS 클래스 선택기를 사용하여 스크롤 막대 영역의 모양이 제어됩니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar

예 - 썸네일 영역의 위쪽, 오른쪽 및 아래쪽에서 너비가 28픽셀이고 여백이 8픽셀인 스크롤 막대를 설정합니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar {
 top:8px;
 bottom:8px;
 right:8px;
 width:28px;
}

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

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

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

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

스크롤 막대 썸네일이 스크롤 트랙 영역 내에서 세로로 이동합니다. 세로 위치는 구성 요소 논리에 의해 완전히 제어되지만 썸네일 높이는 컨텐츠 양에 따라 동적으로 변경되지 않습니다. 썸 높이 및 기타 측면이 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

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

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

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

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

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

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

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

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

Business.Adobe.com 리소스

Personalized Experiences Responsive Forms Theme Editor Web Content Management Customer Experience Management Digital Rights Management