주 제어 막대 main-control-bar
주 컨트롤 막대는 eCatalog 검색 뷰어에 사용할 수 있는 모든 사용자 인터페이스 컨트롤(큰 페이지 단추 제외)이 들어 있는 데스크톱 시스템 및 태블릿의 사각형 영역입니다.
휴대폰에서는 여전히 썸네일, 목차, 다운로드, 인쇄, 즐겨찾기, 소셜 공유, 전체 화면 및 닫기 단추를 유지합니다. 그러나 첫 번째 페이지 및 마지막 페이지 단추 및 페이지 표시기는 기본 컨트롤 막대에서 제거되고 보조 컨트롤 막대에 대신 추가됩니다. 기본적으로 기본 컨트롤 막대는 데스크탑 시스템과 휴대폰에서 뷰어 영역 맨 위에 표시되고 태블릿에서 뷰어 영역 맨 아래로 이동합니다. 이 메서드는 항상 사용 가능한 전체 뷰어 너비를 사용합니다. CSS에서 뷰어 컨테이너를 기준으로 색상, 높이 및 세로 위치를 변경할 수 있습니다.
주 컨트롤 막대의 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7controlbar
예 - 뷰어 컨테이너의 맨 위에 위치하며 높이가 36픽셀인 회색 주 컨트롤 막대를 설정합니다.
.s7ecatalogsearchviewer .s7controlbar {
top: 0px;
height: 36px;
background-color: rgba(0, 0, 0, 0.5);
}
기본 컨트롤 막대는 스크롤 기능(선택 사항)을 지원합니다. 뷰어 너비가 너무 작고 컨트롤 막대에 사전 설정된 모든 단추에 맞는 공간이 충분하지 않은 경우 활성화됩니다. 이 경우, 컨트롤 바의 오른쪽에 두 개의 상태 화살표 버튼이 나타납니다. 이 단추를 클릭하거나 탭하면 스크롤 단추 상태에 따라 모든 컨트롤 막대 요소가 왼쪽 또는 오른쪽으로 스크롤됩니다. 이 기능의 기본 사용 사례는 세로 방향으로 작은 화면이 있는 모바일 장치입니다.
스크롤 기능은 기본 컨트롤 막대에 대해 활성화되어 있고 보조 컨트롤 막대에 대해서는 비활성화되어 있습니다. 다음 CSS 클래스 선택기를 사용하여 기능이 켜지고 꺼집니다.
.s7ecatalogsearchviewer .s7controlbar .s7innercontrolbarcontainer
정적 (으)로 설정하면 스크롤 기능이 비활성화됩니다.
스크롤 기능을 사용하려면 이 속성을 절대 (으)로 설정하십시오.
스크롤 단추가 단추를 적절하게 배치하는 특수 컨테이너 요소에 추가됩니다. 스크롤 단추의 높이가 컨트롤 막대 높이보다 작은 경우 이 옵션을 사용하면 단추 주위의 영역을 나머지 컨트롤 막대 배경과 다르게 스타일을 지정할 수 있습니다.
이 스크롤 단추 컨테이너의 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7controlbar .s7scrollbuttoncontainer
CSS를 통해 스크롤 단추 자체의 크기를 조정하고 스킨을 지정할 수 있습니다.
이 단추의 모양은 다음 CSS 클래스 선택기로 제어합니다.
.s7ecatalogsearchviewer .s7controlbar .s7scrollleftrightbutton
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다.
CSS 스프라이트도 참조하십시오.
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);
}