이 단추를 선택하면 이미지가 기본 보기에서 오른쪽으로 회전됩니다. 화면 공간을 절약하기 위해 이 단추가 휴대폰에 표시되지 않습니다. 또한, 다차원 스핀 세트를 사용하면 버튼이 숨겨집니다. CSS를 사용하여 단추의 크기를 지정하고, 스킨을 지정하고, 위치를 지정할 수 있습니다.
스핀 단추의 CSS 속성
이 단추는 CSS 클래스 선택기로 제어되는 DIV인 내부 컨테이너에 추가됩니다.
.s7mixedmediaviewer .s7spinbuttons
CSS 속성 |
설명 |
---|---|
최상위 |
패딩을 포함하여 위쪽 테두리에서 위치를 지정합니다. |
오른쪽 |
패딩을 포함하여 오른쪽 테두리에서 위치를 지정합니다. |
왼쪽 |
패딩을 포함하여 왼쪽 테두리에서 위치를 지정합니다. |
하단 |
패딩을 포함하여 아래쪽 테두리에서 위치를 지정합니다. |
width |
단추의 폭입니다. |
height |
단추의 높이입니다. |
컨테이너 내에 있는 이 단추의 모양은 CSS 클래스 선택기로 제어됩니다.
.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton
CSS 속성 |
설명 |
---|---|
최상위 |
패딩을 포함하여 위쪽 테두리에서 위치를 지정합니다. |
오른쪽 |
패딩을 포함하여 오른쪽 테두리에서 위치를 지정합니다. |
왼쪽 |
패딩을 포함하여 왼쪽 테두리에서 위치를 지정합니다. |
하단 |
패딩을 포함하여 아래쪽 테두리에서 위치를 지정합니다. |
너비 |
단추의 폭입니다. |
높이 |
단추의 높이입니다. |
배경 이미지 |
지정된 단추 상태에 대해 표시되는 이미지입니다. |
배경 위치 |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. 자세한 내용은 CSS Sprite . |
이 버튼은 state
속성 선택기. 다른 스킨을 다른 단추 상태에 적용하는 데 사용할 수 있습니다.
단추 도구 설명은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.
예 - 28 x 28픽셀이며 내부 컨테이너의 오른쪽 가장자리에 위치한 회전 오른쪽 단추를 설정하려면 다음을 수행하십시오. 마지막으로, 에서는 네 개의 서로 다른 단추 상태에 대해 다른 이미지를 표시합니다.
.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton {
position:absolute;
right: 0px;
width:28px;
height:28px;
background-size:contain;
}
.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton[state='up'] {
background-image:url(images/v2/SpinRightButton_light_up.png);
}
.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton[state='over'] {
background-image:url(images/v2/SpinRightButton_light_over.png);
}
.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton[state='down'] {
background-image:url(images/v2/SpinRightButton_light_down.png);
}
.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton[state='disabled'] {
background-image:url(images/v2/SpinRightButton_light_disabled.png);
}