기본 컨트롤 막대

기본 제어 표시줄은 eCatalog 검색 뷰어에 사용할 수 있는 모든 사용자 인터페이스 컨트롤(큰 페이지 단추 제외)이 포함된 데스크톱 시스템 및 태블릿의 사각형 영역입니다.

휴대폰에서는 축소판, 목차, 다운로드, 인쇄, 즐겨찾기, 소셜 공유, 전체 화면 및 닫기 단추가 유지됩니다. 그러나 첫 번째 페이지와 마지막 페이지 단추 및 페이지 표시기는 기본 컨트롤 모음에서 제거되고 대신 보조 컨트롤 모음에 추가됩니다. 기본적으로, 기본 컨트롤 막대는 데스크톱 시스템 및 휴대폰의 뷰어 영역 상단에 표시되고 태블릿의 뷰어 영역 하단으로 이동됩니다. 항상 사용 가능한 전체 뷰어 너비를 사용합니다. CSS에서 뷰어 컨테이너를 기준으로 색상, 높이 및 세로 위치를 변경할 수 있습니다.

기본 컨트롤 막대의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogsearchviewer .s7controlbar

CSS 속성

설명

최상위

뷰어 상단에서 위치를 지정합니다.

하단

뷰어 아래쪽에서 위치를 지정합니다.

height

기본 컨트롤 막대의 높이입니다.

배경색

기본 컨트롤 막대의 배경색입니다.

- 36픽셀이고 뷰어 컨테이너의 상단에 있는 회색 기본 컨트롤 막대를 설정하려면 다음을 수행합니다.

.s7ecatalogsearchviewer .s7controlbar { 
 top: 0px; 
 height: 36px; 
 background-color: rgba(0, 0, 0, 0.5); 
}

기본 컨트롤 막대에서 선택적 스크롤 기능을 지원합니다. 뷰어 너비가 너무 작고 컨트롤 막대에 사전 설정된 모든 단추에 맞출 공간이 충분하지 않으면 활성화됩니다. 이 경우 컨트롤 막대의 오른쪽에 두 가지 상태 화살표 단추가 나타납니다. 이 단추를 클릭하거나 탭하면 스크롤 단추 상태에 따라 모든 컨트롤 막대 요소를 왼쪽 또는 오른쪽으로 스크롤합니다. 이 기능의 기본 사용 사례는 세로 방향의 작은 화면이 있는 모바일 장치입니다.

기본 컨트롤 막대에 대해 스크롤 기능이 활성화되어 있고 보조 컨트롤 막대에 대해 비활성화됩니다. 이 기능은 다음과 같은 CSS 클래스 선택기를 사용하여 켜거나 끕니다.

.s7ecatalogsearchviewer .s7controlbar .s7innercontrolbarcontainer

CSS 속성

설명

위치

정적 으로 설정하면 스크롤 기능이 비활성화됩니다.

이 속성을 절대 로 설정하여 스크롤 기능을 사용하도록 설정합니다.

스크롤 단추는 단추를 올바르게 표시하는 특수 컨테이너 요소에 추가되며 스크롤 단추의 높이가 컨트롤 막대 높이보다 작은 경우 컨트롤 막대 배경의 나머지 부분과 다르게 단추 주위의 영역을 스타일을 지정할 수 있습니다.

이 스크롤 단추 컨테이너의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogsearchviewer .s7controlbar .s7scrollbuttoncontainer

CSS 속성

설명

width

일반적으로 스크롤 단추 자체의 너비보다 크거나 같아야 합니다.

배경색

컨테이너 배경색입니다.

CSS를 통해 스크롤 단추 자체의 크기를 지정하고 스킨을 지정할 수 있습니다.

이 단추의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogsearchviewer .s7controlbar .s7scrollleftrightbutton

CSS 속성

설명

너비

단추 너비.

높이

단추 높이입니다.

배경 이미지

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

배경 위치

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

CSS Sprite 도 참조하십시오.

노트

이 버튼은 stateselected 속성 선택기를 지원하며, 이 선택기를 사용하여 다른 스킨을 다른 단추 상태에 적용할 수 있습니다. 특히, state="selected"은 제어 막대 내용을 왼쪽으로 스크롤할 수 있는 경우 초기 스크롤 단추 상태에 해당합니다. state="default" 은 컨텐츠가 왼쪽으로 스크롤될 때 상태에 해당하며 스크롤 단추는 컨텐츠가 초기 상태로 돌아가도록 제안합니다.

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

- 휴대폰의 기본 컨트롤 모음에서 스크롤 기능을 활성화하고, 선택 여부에 따라 4개의 다른 단추 상태에 대해 다른 이미지를 표시하는 64 x 64픽셀인 스크롤 단추를 설정하려면 다음을 수행합니다.

.s7ecatalogsearchviewer.s7size_small .s7controlbar .s7innercontrolbarcontainer { 
 position: absolute; 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollbuttoncontainer { 
 width:64px; 
 background-color: rgb(0, 0, 0); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton { 
 width:64px; 
 height:64px; 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='up'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_up_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='over'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_over_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='down'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_down_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='disabled'] { 
 background-image:url(images/v2/ControlBarLeftButton_dark_disabled_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='up'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_up_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='over'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_over_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='down'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_down_touch.png); 
} 
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='disabled'] { 
 background-image:url(images/v2/ControlBarRightButton_dark_disabled_touch.png); 
}

이 페이지에서는