페이지 보기

기본 보기는 카탈로그 이미지로 구성됩니다. 다른 페이지로 이동하거나 확대/축소할 수 있습니다.

기본 뷰어 영역의 CSS 속성

보기 영역의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogsearchviewer .s7pageview

CSS 속성

설명

배경색

기본 보기의 배경색(16진수 형식)입니다.

커서

기본 보기 위에 표시되는 커서입니다.

예 - 기본 보기를 투명하게 만듭니다.

.s7ecatalogsearchviewer .s7pageview { 
 background-color: transparent; 
}

데스크탑 시스템에서 구성 요소는 cursortype 에 적용할 수 있는 속성 선택기 .s7pageview 클래스 및 는 구성 요소 상태 및 사용자 작업을 기반으로 커서 유형을 제어합니다. 다음 cursortype 지원되는 값은 다음과 같습니다.

값

설명

기본값

작은 이미지 해상도, 구성 요소 설정 또는 둘 다로 인해 이미지를 확대할 수 없을 때 표시됩니다.

조모

이미지를 확대/축소할 수 있을 때 표시됩니다.

재설정

이미지가 최대 확대/축소 수준에 있을 때 표시되고 초기 상태로 재설정할 수 있습니다.

드래그

사용자가 확대/축소된 상태의 이미지를 이동할 때 표시됩니다.

슬라이드

사용자가 가로 밀기 또는 긋기를 수행하여 이미지 교체를 수행할 때 표시됩니다.

카탈로그 스프레드의 왼쪽 및 오른쪽 페이지를 시각적으로 구분하는 페이지 구분선은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogsearchviewer .s7pageview .s7pagedivider

CSS 속성

설명

width

페이지 구분선의 폭입니다. 을 로 설정합니다. 0 px를 사용하여 구분선을 완전히 숨깁니다.

배경 이미지

페이지 구분선으로 사용할 이미지입니다.

예 - 반투명 이미지가 있는 40픽셀 너비의 페이지 구분선이 있어야 합니다.

.s7ecatalogsearchviewer .s7pageview .s7pagedivider { 
 width:40px; 
 background-image:url(images/sdk/divider.png); 
}
노트

이 frametransition 수정자가 turn 또는 auto (데스크톱 시스템에서) 페이지 분할기의 모양은 pageturnstyle 수정자 및 .s7pagedivider CSS 클래스는 무시됩니다.

주 뷰어 영역 위에 사용자 지정 마우스 커서를 표시할 수 있습니다. 이 기능은 다음에 적용되는 추가 속성 선택기를 사용하여 제어됩니다 .s7ecatalogsearchviewer .s7pageview CSS 클래스:

CSS 속성

설명

기본값

일반적으로 화살표는 확대/축소가 불가능한 이미지에 대해 표시됩니다.

조모

이미지를 확대/축소할 수 있는 시기를 표시합니다.

재설정

이미지가 최대 확대/축소에 있는 시점을 표시하고 재설정할 수 있습니다.

드래그

사용자가 확대된 이미지에서 드래그 작업을 수행하는 시기를 표시합니다

슬라이드

사용자가 슬라이드 제스처를 사용하여 이미지 교환을 수행하는 시기를 표시합니다

예 - 각 구성 요소 상태 유형에 대해 서로 다른 마우스 커서를 사용합니다.

.s7ecatalogsearchviewer .s7pageview[cursortype="default"] { 
cursor:auto; 
} 
.s7ecatalogsearchviewer .s7pageview[cursortype="zoomin"] { 
cursor:url(images/zoomin_cursor.cur), auto; 
} 
.s7ecatalogsearchviewer .s7pageview[cursortype="reset"] { 
cursor:url(images/zoomout_cursor.cur), auto; 
} 
.s7ecatalogsearchviewer .s7pageview [cursortype="slide"] { 
cursor:url(images/slide_cursor.cur), auto; 
} 
.s7ecatalogsearchviewer .s7pageview[cursortype="drag"] { 
cursor:url(images/drag_cursor.cur), auto; 
}

이 페이지에서는