기본 제어 표시줄은 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 속성 |
설명 |
---|---|
position |
로 설정된 경우 정적 스크롤 기능이 비활성화됩니다. 이 속성을 절대 스크롤 기능을 활성화하려면 |
스크롤 버튼이 버튼을 제대로 배치하는 특수 컨테이너 요소에 추가됩니다. 스크롤 단추의 높이가 컨트롤 막대 높이보다 작은 경우 컨트롤 막대 배경의 나머지 부분과 단추 주위의 영역 스타일을 다르게 지정할 수 있습니다.
이 스크롤 단추 컨테이너의 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7controlbar .s7scrollbuttoncontainer
CSS 속성 |
설명 |
---|---|
width |
일반적으로 스크롤 단추 자체의 너비보다 크거나 같아야 합니다. |
배경색 |
컨테이너 배경색입니다. |
CSS를 통해 스크롤 단추 자체의 크기를 지정하고 스킨을 지정할 수 있습니다.
이 단추의 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7controlbar .s7scrollleftrightbutton
CSS 속성 |
설명 |
---|---|
너비 |
단추 너비. |
높이 |
단추 높이입니다. |
배경 이미지 |
지정된 단추 상태에 대해 표시되는 이미지입니다. |
배경 위치 |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. 참조 - CSS Sprite . |
이 버튼은 state
및 selected
속성 선택기를 사용하여 다른 스킨을 다른 단추 상태에 적용할 수 있습니다. 특히, 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);
}