검색 결과 패널은 맨 위에 있는 검색 입력 상자와 정보 메시지 또는 검색 결과가 표시되는 기본 영역으로 구성됩니다.
기본 뷰어 영역의 CSS 속성
패널이 활성화되면 뷰어 사용자 인터페이스가 반투명 채우기로 표시됩니다. 이 채우기의 색상 및 불투명도는 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogviewer .s7searchpanel .s7backoverlay
CSS 속성 |
설명 |
---|---|
배경색 |
오버레이의 색입니다. |
불투명도 |
색상의 불투명도입니다. |
검색 결과 패널은 항상 사용 가능한 모든 뷰어 높이를 차지합니다. 그러나 너비를 구성할 수 있습니다. 폭을 중간 및 큰 크기 중단점에 대한 기본 설정인 절대 픽셀 값으로 설정할 수 있습니다. 또는 너비를 100%로 설정하여 검색 결과 패널이 전체 뷰어 영역을 차지하도록 할 수 있습니다. 패널 너비는 다음 CSS 클래스 선택기에 의해 제어됩니다.
.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace
검색 결과 공간의 CSS 속성
width |
검색 결과 공간의 너비입니다. |
예 - 크고 중간 크기 중단점에 250픽셀 단위의 검색 결과 패널을 설정하고 작은 크기 중단점에서 전체 크기 패널을 사용하려면 다음을 수행하십시오.
.s7ecatalogsearchviewer.s7size_large .s7searchpanel .s7searchresultspanel, .s7ecatalogsearchviewer.s7size_medium .s7searchpanel .s7searchresultspanel {
width:250px;
}
.s7ecatalogsearchviewer.s7size_small .s7searchpanel .s7searchresultspanel {
width:100%;
}
검색 결과 패널의 맨 위에는 검색 입력 상자가 표시됩니다. 입력 상자의 측면에 있는 패딩은 다음 CSS 클래스 선택기에 의해 제어됩니다.
.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer
검색 입력 컨테이너의 CSS 속성
패딩 |
입력 상자 주위에 패딩됩니다. |
검색 입력 필드는 다음 CSS 클래스 선택기에 의해 제어됩니다.
.s7ecatalogsearchviewer .s7searchpanel .s7searchinput
검색 입력 필드의 CSS 속성
height |
검색 입력 필드의 높이입니다. |
왼쪽 패딩 |
입력 필드 한도와 입력 텍스트 사이의 내부 패딩입니다. |
경계 |
검색 입력 필드의 테두리입니다. |
margin |
검색 입력 필드의 여백입니다 |
font-size |
텍스트 글꼴의 크기입니다. |
예 - 0픽셀 높이 및 14픽셀 텍스트 글꼴로 검색 입력 필드를 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7searchpanel .s7searchinput {
padding-left:5px;
height:30px;
font-size:14px;
}
검색 입력 필드의 왼쪽에 있는 검색 버튼은 기본적으로 "유리 보기" 형태로, 다음 CSS 클래스 선택기에서 제어합니다.
.s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton
검색 입력 단추의 CSS 속성
너비 |
검색 입력 단추의 폭입니다. |
높이 |
검색 입력 단추의 높이입니다. |
배경 이미지 |
"보이는 유리" 아이콘 이미지의 URL입니다. |
배경 크기 |
"보기 유리" 아이콘의 크기입니다. |
경계 |
검색 입력 단추의 테두리입니다. |
여백 |
검색 입력 단추의 여백입니다. |
예 - 26 x 26 픽셀 "유리" 아이콘이 있는 검색 단추를 설정하려면 다음을 수행합니다. 1픽셀 테두리가 있는 30픽셀 크기:
.s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton {
width:30px;
height:30px;
background-size:26px 26px;
background-image: url(images/v2/Search_form_field.png);
font-size:14px;
border: 1px solid #696969;
}
기능을 처음 호출하면 검색 결과 패널에 텍스트 프롬프트가 표시될 수 있습니다. 또한 사용자의 검색이 결과를 반환하지 않은 경우에도 메시지가 표시됩니다. 모든 경우 텍스트는 검색 결과 패널의 주 부분에 나타나고 다음 CSS 클래스 선택기에 의해 제어됩니다.
.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo
검색 정보의 CSS 속성
color |
텍스트 색상. |
font-family |
텍스트 글꼴의 이름입니다. |
font-align |
가로 텍스트 정렬. |
font-size |
글꼴 텍스트의 크기입니다. |
이 텍스트 패널은 state
속성 선택기. 다른 텍스트 메시지에 다른 스타일을 적용하는 데 사용할 수 있습니다. 특히, state='prompt'
는 패널을 처음 호출할 때 표시되는 텍스트 프롬프트에 해당합니다. 다음 state='results'
는 검색 히트에 대한 정보가 있는 텍스트에 해당합니다. 그리고 마지막으로, state='no_results'
은 검색 쿼리에서 결과를 반환하지 않을 때 표시되는 텍스트에 해당합니다.
메시지 텍스트를 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.
예 - 회색 18픽셀 글꼴을 사용하는 텍스트 패널을 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo {
font-size: 18px;
color: #696969;
}
검색 결과는 검색 히트가 있는 페이지의 단일 열 또는 단일 축소판 행으로 렌더링됩니다. 검색 결과 축소판 간의 간격은 다음 CSS 클래스 선택기로 제어됩니다.
.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell
축소판 셀의 CSS 속성
여백 |
각 축소판 주위의 세로 여백 크기입니다. 실제 축소판 간격은 .s7thumbcell . |
예 - 10픽셀 간격을 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell {
margin: 5px;
}
개별 축소판의 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb
축소판의 CSS 속성
너비 |
축소판의 폭입니다. |
높이 |
축소판의 높이입니다. |
경계 |
축소판의 테두리입니다. |
예 - 215 x 129픽셀로 축소판을 설정하려면 밝은 회색의 기본 테두리와 어두운 회색으로 선택한 테두리를 사용합니다.
.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb {
width: 215px;
height: 129px;
}
축소판 레이블의 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label
레이블의 CSS 속성
색상 |
텍스트 색상. |
font-family |
텍스트 글꼴의 이름입니다. |
font-size |
텍스트 글꼴의 크기입니다. |
예 - 12픽셀, 회색, Helvetica® 글꼴을 사용하는 레이블을 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7label {
font-family: Helvetica,sans-serif;
color: #4c4c4c;
font-size: 12px;
}
마우스 입력을 사용하는 시스템에서는 검색 결과 패널 아래에 두 개의 스크롤 버튼이 나타나고 사용자가 검색 결과를 스크롤합니다. 위쪽 및 아래쪽 스크롤 단추의 모양은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton
CSS 위쪽, 왼쪽, 아래쪽 및 오른쪽 속성을 사용하여 스크롤 단추를 배치할 수 없습니다. 대신 뷰어 논리에서 자동으로 위치를 지정합니다.
스크롤 위쪽 및 아래쪽 단추의 CSS 속성
너비 |
스크롤 단추의 폭입니다. |
높이 |
스크롤 단추의 높이입니다. |
배경 이미지 |
지정된 단추 상태에 대해 표시되는 이미지입니다. |
배경 위치 |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. 참조 - CSS Sprite . |
이 버튼은 state
속성 선택기를 사용하여 여러 스킨을 "up"
, "down"
, "over"
, 및 "disabled"
단추 상태.
단추 도구 설명은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.
예 - 125 x 35픽셀이고 각 상태에 대해 서로 다른 아트웍을 갖는 스크롤 업 단추를 설정하려면 다음을 수행합니다.
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton {
width:125px;
height:35px;
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/searchpanel_scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='over'] {
background-image:url(images/sdk/searchpanel_scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='down'] {
background-image:url(images/sdk/searchpanel_scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='disabled'] {
background-image:url(images/sdk/searchpanel_scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton {
width:125px;
height:35px;
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='up'] {
background-image:url(images/sdk/searchpanel_scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='over'] {
background-image:url(images/sdk/searchpanel_scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='down'] {
background-image:url(images/sdk/searchpanel_scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='disabled'] {
background-image:url(images/sdk/searchpanel_scroll_down_disabled.png);